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 om naar RGB‑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 CMYK‑naar‑RGB stap is al een benadering en HSL‑waarden worden naar hele getallen afgerond. Het resultaat is een zeer nauwkeurige match, geen kleurbeheerde conversie.
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(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |