HSL‑is kujundatud paletid satuvad tihti paberile. See teisendaja võtab sinu valitud hue, saturation ja lightness ning tagastab neli tindiprotsenti, millega trükikoda töötab.
Kuidas HSL -> CMYK teisendamine toimib
- Muuda HSL kolmik RGB kanaliteks vahemikus 0 kuni 255.
- Normaliseeri need kanalid, jagades 255‑ga.
- Arvuta key komponent K = 1 − max(R, G, B).
- Tuleta C, M ja Y järelejäänud kanalitest ning muuda kõik neli protsentideks.
Töötav näide
Toimuvad kaks järjestikust teisendust, seega toimub ümardamine kaks korda — ja CMYK jääb ilma värviprofiilita ligikaudseks. Oota, et trükitulemus on HSL‑eelvaatest veidi vähem erksavärviline.
HSL ja CMYK selgitatud
Mis on HSL?
HSL jagab värvi tooniks (0–360° värvirattal), küllastuseks (kui erksas, 0–100%) ja heleduseks (kui hele, 0–100%). Kuna iga osa peegeldab seda, kuidas inimesed värve kirjeldavad, on HSL kõige lihtsam vorming varjundite, toonide ja järjepidevate palettide loomiseks — käsitsi või koodis.
- Süntaks:
- hsl(H, S%, L%)
- Vahemik:
- 0–360°, 0–100%, 0–100%
- Parim jaoks:
- paletid, toonid ja varjundid, teematöö
Mis on CMYK?
CMYK on trükis kasutatav nelja-tindi mudel: cyan, magenta, yellow ja key (must), igaüks protsentides 0–100. Tint lahutab valgust rather than emit, seetõttu katab CMYK vähem toone kui ekraan — seetõttu näevad erksad ekraanivärvid sageli trükis tuhmid välja.
- Süntaks:
- cmyk(C%, M%, Y%, K%)
- Vahemik:
- 0–100% per tint
- Parim jaoks:
- trükk, pakendikujundus, trükiks valmis artwork
HSL -> CMYK võrdlustabel
Kõige levinumad CSS-värvid, teisendatud HSL formaadist CMYK formaati.
| Värv | 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%) |