Ontwerptools

Snelle tools voor front-end- en visueel ontwerp, met CSS die u direct kunt kopiëren en toegankelijkheidscontroles op basis van de WCAG-contrastformule.

7 tools

Tools in deze categorie

KleurconverterZet kleuren om tussen HEX, RGB, HSL, HWB, OKLCH en eenvoudige CMYK. Plak een CSS-kleur of gebruik de kleurkiezer en kopieer daarna elke notatie. Werkt in je browser.
ContrastcheckerControleer de WCAG 2.2-contrastverhouding van tekst en achtergrond. Bekijk de AA- en AAA-resultaten voor tekst en UI-elementen en vind de dichtstbijzijnde kleur die voldoet.
CSS-gradientgeneratorMaak lineaire, radiale en conische CSS-verlopen met 2 tot 6 kleurstops. Stel de hoek en posities in, bekijk direct een voorbeeld en kopieer de CSS voor de achtergrond.
Box Shadow GeneratorOntwerp CSS-box-shadow met meerdere lagen: verschuiving, vervaging, spreiding, kleur, dekking en inset. Bekijk een voorbeeld op elke achtergrond en kopieer de CSS.
KleurenpaletgeneratorGenereer complementaire, analoge, triadische, tetradische, gesplitst complementaire paletten en paletten met kleurschakeringen op basis van één kleur. Vergrendel kleuren en kopieer daarna HEX, CSS of JSON.
PX naar REM-omrekentoolReken px om naar rem of em en terug, met elke gewenste basislettergrootte (standaard 16px). Bevat een tabel met veelgebruikte groottes en rekent px-waarden in volledige CSS-snippets om.
BeeldverhoudingcalculatorBereken de ontbrekende breedte of hoogte voor elke beeldverhouding, vereenvoudig afmetingen zoals 1920×1080 naar 16:9, bekijk een voorbeeld van de vorm en kopieer de CSS-regel aspect-ratio.