Palette wat in HSL ontwerp is beland dikwels op papier. Hierdie omskakelaar neem die tint, versadiging en ligtheid wat jy gekies het en gee die vier inkpersentasies wat ’n drukker gebruik.
Hoe HSL na CMYK omskakeling werk
- Skakel die HSL‑drieklank om na RGB‑kanale tussen 0 en 255.
- Normaliseer daardie kanale deur te deel deur 255.
- Bereken die key‑komponent K = 1 − max(R, G, B).
- Leid C, M en Y af van die oorblywende kanale en skakel al vier om na persentasies.
Werkende voorbeeld
Twee omskakelings gebeur agtereenvolgens, so afronding vind twee keer plaas — en CMYK bly ’n benadering sonder kleurprofiel. Verwacht dat die gedrukte resultaat effens minder lewendig is as die HSL-voorbeeld.
HSL en CMYK verduidelik
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
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
HSL na CMYK verwysingstabel
Die mees algemene CSS-kleure, omgeskakel van HSL na 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%) |