Kuleta paleti ya kuchapishwa kwenye wavuti ni rahisi zaidi kwa HSL: mara wingi wa wino umeonyeshwa kama hue, saturation na lightness, unaweza kujenga hover states, tints na shades kwa sekunde.
Jinsi uongozaji wa CMYK hadi HSL unavyofanya kazi
- Badilisha asilimia za CMYK kuwa chaneli za RGB kati ya 0 na 255.
- Gawanya chaneli kwa 255 na chukua kubwa na ndogo zaidi yao.
- Wastani wa kubwa na ndogo ni lightness L, tofauti yao ndio inaendesha saturation S.
- Chaneli iliyo juu zaidi ndiyo inayamua hue H kwa digrii kwenye gurudumu la rangi.
Mfano uliofanya kazi
Hatua ya CMYK kwenda RGB tayari ni mkaribia na thamani za HSL huzungushiwa hadi nambari kamili. Matokeo ni mechi ya karibu sana, si ubadilishaji ulioendeshwa na profaili ya rangi.
CMYK na HSL obofye
Ni nini CMYK?
CMYK ni modeli ya wino nne inayotumika kwenye uchapaji: cyan, magenta, yellow na key (nyeusi), kila moja kama asilimia kutoka 0 hadi 100. Wino hupunguza mwanga badala ya kuutoa, hivyo CMYK ina nafasi ndogo ya rangi kuliko skrini — ndiyo maana rangi angavu za skrini mara nyingi zinaonekana kupoteza mngʼaa zinapochapwa.
- Sintaksia:
- cmyk(C%, M%, Y%, K%)
- Wigo:
- 0–100% kwa kila wino
- Bora kwa:
- uchapaji, ufungashaji, kazi za kuchapisha tayari
Ni nini HSL?
HSL inaigawanya rangi katika hue (0–360° kwenye gurudumu la rangi), saturation (ukali wa rangi, 0–100%) na lightness (uwazi/angaza, 0–100%). Kwa kuwa kila sehemu inafanana na jinsi watu wanavyotoa sifa za rangi, HSL ni muundo rahisi zaidi kwa kujenga tints, shades na paleti zenye muendelezo — kwa mkono au kwa code.
- Sintaksia:
- hsl(H, S%, L%)
- Wigo:
- 0–360°, 0–100%, 0–100%
- Bora kwa:
- paleti, tints na shades, theming
CMYK to HSL reference table
Rangi za CSS zinazotumika zaidi, zimetumika kutoka CMYK hadi HSL.
| Rangi | 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%) |