Paletten die in HSL zijn ontworpen belanden vaak op papier. Deze converter neemt de hue, saturation en lightness die je koos en geeft de vier inktpercentages terug waarmee een drukker werkt.
Hoe HSL naar CMYK conversie werkt
- Zet de HSL‑driehoek om naar RGB‑kanalen tussen 0 en 255.
- Normaliseer die kanalen door ze door 255 te delen.
- Bereken het key‑component K = 1 − max(R, G, B).
- Haal C, M en Y af uit de resterende kanalen en zet alle vier om naar percentages.
Werkend voorbeeld
Er vinden twee opeenvolgende conversies plaats, dus afronding gebeurt twee keer — en CMYK blijft een benadering zonder kleurprofiel. Verwacht dat het gedrukte resultaat iets minder levendig is dan de HSL‑preview.
HSL en CMYK uitgelegd
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
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
HSL naar CMYK referentietabel
De meest voorkomende CSS-kleuren, geconverteerd van HSL naar CMYK.
| Kleur | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |