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.
- Lees hulle as sRGB-waardes en soek die kleur op in die Coated FOGRA39-profiel.
- Gebruik die relatiewe kolorimetriese weergawe-intensie met swartpuntkompensasie, sodat wit papierwit bly en swart na die donkerste ink wat die drukpers kan druk, omgeskakel word.
- Rond die vier inkwaardes af tot heelgetalpersentasies. Hulle volg Photoshop se standaard Europese CMYK-instelling.
Werkende voorbeeld
Twee omskakelings volg op mekaar, so afronding gebeur twee keer, en die CMYK-stap gebruik die standaard Coated FOGRA39-profiel. Ander CMYK-profiele (byvoorbeeld van jou drukkery) gee verskillende getalle. Verwag dat die gedrukte resultaat effens minder lewendig sal wees as die HSL-voorskou.
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(89%, 78%, 62%, 97%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 95%, 92%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(64%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(93%, 75%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(9%, 0%, 96%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 42%, 94%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(83%, 28%, 47%, 12%) |
| purple | hsl(300, 100%, 25%) | cmyk(63%, 100%, 5%, 2%) |
| gray | hsl(0, 0%, 50%) | cmyk(48%, 39%, 39%, 21%) |