Kleurconverter
Converteer kleuren tussen HEX, RGB, HSL en OKLCH met live voorbeeld
Over deze tool
Voer een kleur in in elke gangbare notatie — #hex, rgb(), hsl(), of een CSS-kleurnaam — en krijg alle formaten tegelijk: HEX, RGB, HSL en OKLCH, naast een levend kleurvlak. Alfakanalen blijven bewaard tussen formaten, en de uitvoer gebruikt moderne CSS-syntaxis (kanalen gescheiden door spaties) die schoon in hedendaagse stylesheets plakt.
OKLCH zit erbij omdat CSS-kleur die kant op gaat: anders dan bij HSL is de lichtheidsas perceptueel uniform, dus twee kleuren met dezelfde L ogen echt even helder, en de tint aanpassen verandert niet per ongeluk de waargenomen helderheid. Een bestaand palet naar OKLCH omzetten is de eerste stap naar consistente kleurschalen.
De rekenkunde draait lokaal met de gepubliceerde sRGB↔OKLab-transformaties, en waarden komen heen en terug: de RGB die je uit een HSL-invoer terugkrijgt is precies wat de browser zou berekenen.
Veelgestelde vragen
- Waarom komen de lichtheidswaarden van HSL en OKLCH niet overeen?
- De lichtheid van HSL is een meetkundige eigenschap van RGB-waarden, niet van het menselijk zien — hsl(60 100% 50%) geel oogt veel helderder dan hsl(240 100% 50%) blauw, ondanks dezelfde L. De L-as van OKLCH is ontworpen om bij de waarneming aan te sluiten, dus gelijke L betekent gelijke schijnbare helderheid. Precies dat verschil is de hele bestaansreden van OKLCH.
- Wat betekent de alfawaarde en waar staat die in elk formaat?
- Alfa is dekking, van 0 (transparant) tot 1 (ondoorzichtig). In 8-cijferige hex is het de laatste byte (#RRGGBBAA); in moderne functionele syntaxis volgt het na een schuine streep: rgb(76 141 255 / 0.5). Deze converter draagt alfa automatisch door alle formaten mee.
- Kan elke OKLCH-kleur in sRGB getoond worden?
- Nee — OKLCH bestrijkt brede gamuts, en sommige combinaties van chroma en lichtheid hebben geen sRGB-equivalent. Converteren vanuit sRGB (zoals deze tool doet) blijft altijd weer te geven; andersom moeten kleuren buiten het gamut geknipt of afgebeeld worden, en daarom oogt een fel P3-groen doffer op een sRGB-scherm.
- Waarom rgb(76 141 255) met spaties in plaats van komma’s?
- CSS Color Module Level 4 standaardiseerde kanalen gescheiden door spaties met een optionele /alfa, en elke moderne browser ondersteunt dat. De kommavorm werkt nog steeds, maar de spatievorm is wat nieuwe specificaties (en deze tool) gebruiken.