Om ’n drukkpalet na die web te bring is makliker in HSL: sodra jou inkmengsel as tint, versadiging en ligtheid uitgedruk is, kan jy hover‑state, tintte en skakerings daarvan in sekondes bou.
Hoe CMYK na HSL omskakeling werk
- Skakel die CMYK‑persentasies om na RGB‑kanale tussen 0 en 255.
- Deel die kanale deur 255 en neem hul maksimum en minimum.
- Die gemiddelde van maksimum en minimum is die ligtheid L; hul verskil dryf die versadiging S.
- Die kanaal wat die maksimum hou bepaal die tint H in grade op die kleurwiel.
Werkende voorbeeld
Die CMYK‑na‑RGB‑stap is reeds ’n benadering en HSL‑waardes word na heelgetalle afgerond. Die resultaat is ’n baie noue pas, nie ’n kleurbestuurde omskakeling nie.
CMYK en HSL verduidelik
Wat is CMYK?
CMYK is die vier-ink model wat in drukwerk gebruik word: cyan, magenta, geel en key (swart), elk as ’n persentasie van 0 tot 100. Ink trek lig weg in plaas van dit uit te straal, so CMYK dek minder kleure as ’n skerm — daarom lyk helder skermkleure dikwels doffer wanneer hulle gedruk word.
- Sintaks:
- cmyk(C%, M%, Y%, K%)
- Reeks:
- 0–100% per ink
- Beste vir:
- drukwerk, verpakking, persgereed kunswerk
Wat is HSL?
HSL verdeel ’n kleur in hue (0–360° op die kleurwiel), versadiging (hoe kleurvol, 0–100%) en ligtheid (hoe helder, 0–100%). Omdat elk van hierdie dele ooreenstem met hoe mense kleur beskryf, is HSL die maklikste formaat om tint-, skadu- en konsekwente palette te bou — met die hand of in kode.
- Sintaks:
- hsl(H, S%, L%)
- Reeks:
- 0–360°, 0–100%, 0–100%
- Beste vir:
- palette, tint- en skaduwerk, theming
CMYK na HSL verwysingstabel
Die mees algemene CSS-kleure, omgeskakel van CMYK na 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%) |