Mas madali dalhin ang print palette sa web gamit ang HSL: kapag naipahayag mo na ang ink mix bilang hue, saturation at lightness, makakabuo ka ng hover states, tints at shades mula rito sa loob ng segundo.
Paano gumagana ang conversion mula CMYK papuntang HSL
- I-convert ang mga porsyento ng CMYK sa mga sRGB na channel mula 0 hanggang 255 gamit ang Coated FOGRA39 profile.
- Hatiin ang mga channel sa 255 at kunin ang pinakamalaki at pinakamaliit nila.
- Ang average ng pinakamalaki at pinakamaliit ang lightness L, at ang pagkakaiba nila ang nagdidrive ng saturation S.
- Ang channel na may pinakamalaki ang nagtatakda ng hue H sa degrees sa color wheel.
Halimbawang gumagana
Ginagamit ng hakbang na CMYK papuntang RGB ang karaniwang Coated FOGRA39 profile, kaya magbibigay ng ibang numero ang ibang CMYK profile (halimbawa mula sa iyong imprenta). Ang mga HSL na halaga ay ni-round sa buong numero.
Ipinaliwanag ang CMYK at HSL
Ano ang CMYK?
Ang CMYK ay ang four-ink model na ginagamit sa pagpi-print: cyan, magenta, yellow at key (black), bawat isa bilang porsyento mula 0 hanggang 100. Ang tinta ay nag-aalis ng ilaw sa halip na naglalabas nito, kaya mas kaunti ang kulay na kaya ng CMYK kumpara sa screen — kaya madalas mas mapurol ang maliwanag na screen colors kapag na-print.
- Sintaks:
- cmyk(C%, M%, Y%, K%)
- Saklaw:
- 0–100% per ink
- Pinakamainam para sa:
- print, packaging, press-ready artwork
Ano ang HSL?
Hinahati ng HSL ang kulay sa hue (0–360° sa color wheel), saturation (gaano ka-colorful, 0–100%) at lightness (gaano kabilis o liwanag, 0–100%). Dahil tumutugma ang bawat bahagi sa paraan ng paglalarawan ng kulay ng mga tao, pinakamadaling gamitin ang HSL para bumuo ng tints, shades at pare-parehong palettes — mano-mano o sa code.
- Sintaks:
- hsl(H, S%, L%)
- Saklaw:
- 0–360°, 0–100%, 0–100%
- Pinakamainam para sa:
- palettes, tints and shades, theming
CMYK to HSL reference table
Ang mga pinaka-karaniwang CSS na kulay, naka-convert mula CMYK papuntang HSL.
| Kulay | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |