Een drukpalet naar het web brengen is makkelijker in HSL: zodra je inktmix is uitgedrukt als hue, saturation en lightness kun je in seconden hover‑states, tinten en schakeringen bouwen.
Hoe CMYK naar HSL conversie werkt
- Zet de CMYK-percentages met het Coated FOGRA39-profiel om naar sRGB-kanalen tussen 0 en 255.
- Deel de kanalen door 255 en bepaal hun maximum en minimum.
- Het gemiddelde van maximum en minimum is de lightness L, hun spreiding bepaalt de saturation S.
- Het kanaal met de maximumwaarde bepaalt de hue H in graden op het kleurenwiel.
Werkend voorbeeld
De stap van CMYK naar RGB gebruikt het standaardprofiel Coated FOGRA39, dus andere CMYK-profielen (bijvoorbeeld van je drukkerij) geven andere getallen. HSL-waarden worden afgerond op hele getallen.
CMYK en HSL uitgelegd
Wat is CMYK?
CMYK is het vier-inkmodel dat in drukwerk wordt gebruikt: cyan, magenta, geel en key (zwart), elk als een percentage van 0 tot 100. Inkt trekt licht weg in plaats van het uit te zenden, dus CMYK dekt minder kleuren dan een scherm — daarom zien felle schermkleuren er vaak doffer uit wanneer ze eenmaal gedrukt zijn.
- Syntaxis:
- cmyk(C%, M%, Y%, K%)
- Bereik:
- 0–100% per inkt
- Het meest geschikt voor:
- drukwerk, verpakking, drukklare bestanden
Wat is HSL?
HSL splitst een kleur in hue (0–360° op het kleurwiel), saturation (hoe kleurrijk, 0–100%) en lightness (hoe helder, 0–100%). Omdat elk deel overeenkomt met hoe mensen kleur beschrijven, is HSL het makkelijkste formaat om tinten, schaduwen en consistente paletten te bouwen — handmatig of in code.
- Syntaxis:
- hsl(H, S%, L%)
- Bereik:
- 0–360°, 0–100%, 0–100%
- Het meest geschikt voor:
- paletten, tinten en schaduwen, theming
CMYK naar HSL referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van CMYK naar HSL.
| Kleur | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |