Shtimi i një palete të shtypur në web është më i lehtë në HSL: sapo përzierja e bojës të shprehet si hue, saturation dhe lightness, mund të krijosh shtete hover, tints dhe shades në sekonda.
Si funksionon konvertimi CMYK në HSL
- Kthe përqindjet CMYK në kanalet RGB midis 0 dhe 255.
- Pjesëto kanalet me 255 dhe marrë maksimumin dhe minimumin e tyre.
- Mesatarja e maksimumit dhe minimumit është lightness L, përhapja e tyre përcakton saturacionin S.
- Kanalja që mban maksimumin përcakton hue-n H në gradë mbi rrotën e ngjyrave.
Shembull i punuar
Hapi CMYK në RGB është tashmë një përafërim dhe vlerat HSL rrumbullakosen në numra të plotë. Rezultati është shumë afër, jo një konvertim i menaxhuar me ngjyra.
CMYK dhe HSL shpjeguara
Çfarë është CMYK?
CMYK është modeli me katër bojëra i përdorur në printim: cyan, magenta, yellow dhe key (e zezë), secila si përqindje nga 0 deri në 100. Boja zbeh dritën në vend që ta emetojë, kështu që CMYK mbulon më pak ngjyra sesa një ekran — prandaj ngjyrat e ndritshme të ekranit shpesh duken më të zbehta pasi printohen.
- Sintaksa:
- cmyk(C%, M%, Y%, K%)
- Dhe:
- 0–100% për bojë
- Më i mirë për:
- print, paketim, artwork gati për shtyp
Çfarë është HSL?
HSL ndan një ngjyrë në hue (0–360° në rrotën e ngjyrave), saturation (sa e ngjyrshme, 0–100%) dhe lightness (sa e ndritshme, 0–100%). Sepse secila pjesë i përgjigjet mënyrës si njerëzit përshkruajnë ngjyrën, HSL është formati më i lehtë për të ndërtuar tintat, hijet dhe paletat konsistente — me dorë ose në kod.
- Sintaksa:
- hsl(H, S%, L%)
- Dhe:
- 0–360°, 0–100%, 0–100%
- Më i mirë për:
- paleta, tintat dhe hijet, tematizim
tabelë referimi CMYK në HSL
Ngjyrat më të zakonshme CSS, të konvertuara nga CMYK në HSL.
| Ngjyrë | 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%) |