Kleurconverter

Kies een kleur of voer hem in een willekeurig formaat in (HEX, RGB, HSL, OKLCH, een naam zoals "tomato"…) en zie direct de waarde in alle andere formaten, klaar om in je CSS te plakken. Stel de transparantie in en controleer of de kleur goed leesbaar is op wit en op zwart.

Kleurformaten

HEX (#RRGGBB) is het meest gebruikte formaat op het web: drie paren hexadecimale cijfers met de hoeveelheid rood, groen en blauw, van 00 tot FF. RGB drukt hetzelfde decimaal uit, van 0 tot 255. HSL beschrijft een kleur met tint (0-360°), verzadiging en lichtheid in procenten, zodat je makkelijk lichtere of donkerdere varianten van dezelfde kleur maakt.

CMYK (cyaan, magenta, geel en zwart) is het kleurmodel van de drukkerij. De omrekening vanuit RGB is een benadering: voor nauwkeurig drukwerk heb je het kleurprofiel van de drukker nodig.

Transparantie, HWB en OKLCH

Transparantie geef je aan met een vierde waarde, het alfakanaal: #FF880080 (HEX met 8 cijfers), rgba(255, 136, 0, 0.5) of, in de moderne notatie, rgb(255 136 0 / 50%). 0 is volledig transparant en 1 (of 100%) volledig dekkend.

HWB (tint, wit en zwart) en OKLCH (lichtheid, chroma en tint) zijn formaten uit CSS Color 4 die alle huidige browsers ondersteunen. OKLCH is perceptueel uniform: twee kleuren met dezelfde lichtheid zien er even licht uit, ideaal voor paletten en varianten. HSV/HSB bestaat niet in CSS, maar wordt gebruikt door Photoshop, Figma en andere ontwerpprogramma's.

CSS kent ook 148 kleurnamen (tomato, rebeccapurple, steelblue…). Heeft je kleur geen naam, dan tonen we de meest gelijkende CSS-naam.

Contrast en toegankelijkheid

De toegankelijkheidsrichtlijnen WCAG eisen een minimaal contrast tussen tekst en achtergrond, zodat slechtzienden de tekst kunnen lezen: 4,5:1 voor normale tekst op niveau AA en 7:1 op niveau AAA (3:1 en 4,5:1 voor grote tekst). Het contrast loopt van 1:1 (dezelfde kleur) tot 21:1 (zwart op wit).