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 CMYK percentages sa RGB channels mula 0 hanggang 255.
- 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
Ang CMYK sa RGB na hakbang ay approximation na at ang HSL values ay niro-round sa buong numero. Malapit na tugma ang resulta, hindi isang color-managed conversion.
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(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%) |