Hoe het werkt
Dezelfde kleur kan op veel manieren worden geschreven. HEX (#RRGGBB) en RGB beschrijven de mix van rood, groen en blauw; HSL en HSV beschrijven die met tint, verzadiging en helderheid, intuïtiever om varianten te kiezen; en CMYK is gericht op drukwerk.
Deze tool neemt een kleur in HEX, RGB of HSL en vertaalt die direct naar alle formaten, inclusief moderne CSS Level 4-ruimten zoals HWB, LAB, LCH, OKLab, OKLCh en de color()-functies (Display P3, Rec. 2020, ProPhoto).
Met de visuele kiezer en de numerieke besturingselementen kun je de kleur aanpassen en zien hoe alle waarden tegelijk veranderen. Alles wordt in je browser berekend.
Voorbeelden
#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Zuiver rood: maximaal in het rode kanaal, nul in groen en blauw.#3b82f6rgb(59 130 246)Elk paar hexadecimale cijfers (3b, 82, f6) is de 0-255-waarde van een kanaal: 59, 130 en 246.#ffffffrgb(255 255 255) · hsl(0 0% 100%)Wit heeft alle drie de kanalen op maximum; in HSL helderheid 100%.Gebruiksscenario's
- Een HEX-kleur uit een designgids omzetten naar het RGB- of HSL-formaat dat je CSS of framework vereist.
- Het CMYK-equivalent van een schermkleur verkrijgen om drukwerk voor te bereiden.
- Moderne kleurruimten (OKLCh, Display P3) verkennen bij het afstemmen van een wide-gamut palet.
Veelgestelde vragen
Wat is het alfakanaal en hoe wordt het in HEX geschreven?
Alfa is de dekking, van 0 (transparant) tot 100%. In HEX wordt het als een paar cijfers aan het einde toegevoegd: #RRGGBBAA. Bijvoorbeeld, #ff000080 is rood met 50% dekking.
Wat is het verschil tussen HSL en HSV?
Beide gebruiken tint en verzadiging, maar de derde as verschilt: HSL gebruikt helderheid (waarbij 100% wit is) en HSV gebruikt waarde of helderheid (waarbij 100% de meest intense kleur is). HSL is meestal handiger om lichte en donkere tinten te genereren.
Waarom bestaan OKLab en OKLCh?
Het zijn perceptueel uniforme ruimten: gelijke afstanden tussen waarden komen overeen met vergelijkbare visuele verschillen. Ze produceren natuurlijkere verlopen en helderheidsaanpassingen dan HSL, en CSS ondersteunt ze sinds Level 4.
Is de getoonde CMYK nauwkeurig voor drukwerk?
Het is een benaderende referentieconversie. Het werkelijke drukresultaat hangt af van het kleurprofiel, de inkt en het papier, dus voor professioneel werk kun je het beste het ICC-profiel van de drukkerij gebruiken.