Trükipaleti toomine veebilehele on HSL‑is lihtsam: kui sinu tindisegu on väljendatud hue, saturation ja lightness‑ina, saad sekunditega ehitada hover‑seisundeid, tinti ja shade'e.
Kuidas CMYK -> HSL teisendamine toimib
- Muuda CMYK‑protsendid RGB‑kanaliteks vahemikus 0 kuni 255.
- Jaga kanalid 255‑ga ja võta nende maksimum ja miinimum.
- Maksimumi ja miinimumi keskmine on lightness L, nende vahe määrab saturation S.
- Kanali, millel on maksimum, põhjal määratakse hue H kraadides värvirattal.
Töötav näide
CMYK‑st RGB‑ks samm on juba ligikaudne ja HSL‑väärtusi ümardatakse täisarvudeni. Tulemuseks on väga lähedane vaste, mitte värvihaldatav teisendus.
CMYK ja HSL selgitatud
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
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öö
CMYK -> HSL võrdlustabel
Kõige levinumad CSS-värvid, teisendatud CMYK formaadist HSL formaati.
| Värv | 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%) |