Kleuren en design
Kleuren kiezen, omrekenen en combineren, en CSS voor je ontwerpen genereren.
- Beeldverhouding berekenen Bereken en vereenvoudig de beeldverhouding van elke breedte en hoogte, pas het formaat aan met behoud van verhouding en kopieer de CSS aspect-ratio-code.
- Border-radius generator Geef CSS border-radius visueel vorm met versleepbare punten. Stel elke hoek in px of % in, gebruik 8 elliptische waarden, maak blobs en kopieer de code.
- Box-shadow generator Ontwerp gelaagde CSS box-shadows met live voorbeeld. Stel verschuiving, vervaging, spreiding, kleur, dekking en inset in en kopieer de code.
- Clip-path generator Teken CSS clip-path-vormen met versleepbare punten. Bewerk polygonen, cirkels, ellipsen en insets, start met sterren of pijlen en kopieer de code.
- Contrastchecker Gratis WCAG-contrastchecker. Voer een tekst- en achtergrondkleur in en krijg de contrastverhouding, de AA/AAA-resultaten en de dichtste geslaagde kleur.
- CSS-kleurverloop generator Maak lineaire, radiale en conische CSS-gradients met live voorbeeld. Voeg kleurstops toe, sleep ze, stel de hoek in en kopieer nette CSS met één klik.
- Cubic-bezier editor Ontwerp CSS-easingcurves met een versleepbare cubic-bezier-editor, vergelijk ze live met linear en kopieer cubic-bezier() of een linear()-versie.
- Flexbox- en grid-playground Bouw flexbox- en CSS-grid-lay-outs visueel. Stel container en items in, benoem grid-gebieden, zie het resultaat live en kopieer nette CSS en HTML.
- Font subsetter Subset een lettertype tot de tekens die je nodig hebt met HarfBuzz, in je browser. Krijg een kleinere TTF/OTF en WOFF en een @font-face met unicode-range.
- Kleur uit afbeelding halen Open een afbeelding en klik op een pixel voor de kleur in HEX, RGB, HSL, HSV en CMYK. Met zoomloep, gemiddelde en een lijst van kleuren, in je browser.
- Kleurcode omzetten Zet elke kleur om tussen HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH en OKLCH. Plak een code, bekijk de kleur en kopieer elk formaat met één klik.
- Kleurenblindheid simuleren Gratis kleurenblindheid-simulator. Bekijk elke afbeelding met protanopie, deuteranopie, tritanopie, mildere vormen of achromatopsie, naast elkaar of met schuif.
- Kleurenpalet generator Maak een kleurenpalet vanuit één basiskleur met kleurharmonieën: complementair, analoog, triadisch, tetradisch, vierkant en monochroom.
- Kleurenpalet uit afbeelding Haal een kleurenpalet uit elke afbeelding. Open een foto en krijg de dominante kleuren als HEX-codes met hun aandeel, klaar om te kopiëren of te exporteren.
- Kleurkiezer Gratis online kleurkiezer. Kies een kleur en kopieer direct de HEX-, RGB-, HSL-, HSV- en CMYK-code, met de contrastverhouding op wit en zwart.
- Kleurnaam zoeken Vind de naam van elke kleur. Voer een HEX- of RGB-code in en krijg de 5 dichtstbijzijnde namen uit ruim 30.000 kleurnamen, plus de dichtste CSS-kleurnaam.
- Lettertypen combineren Bekijk combinaties van lettertypen voor koppen en lopende tekst met 20 open fonts, stel grootte en regelhoogte in en kopieer de CSS font-family-stacks.
- PX naar REM omrekenen Reken px om naar rem en em met elke basislettergrootte, maak een omrekentabel en zet alle px-waarden in een stuk CSS met één klik om naar rem.
- Tinten lichter en donkerder maken Maak lichtere en donkere tinten van elke kleur in stappen van 5, 10, 20 of 25%, gemengd in OKLCH of sRGB, en exporteer ze als CSS-variabelen of Tailwind-config.