Drukas paleti uz web ir vieglāk atvest HSL: kad tavs tinšu maisījums ir izteikts kā tonis, piesātinājums un gaišums, vari sekundēs izveidot hover stāvokļus, tints un shades.
Kā darbojas CMYK uz HSL konvertēšana
- Pārvērt CMYK procentus uz RGB kanāliem no 0 līdz 255.
- Daliet kanālus ar 255 un atrodi to maksimumu un minimumu.
- Maksimuma un minimuma vidējā vērtība ir gaišums L, to atšķirība nosaka piesātinājumu S.
- Kanāls, kuram ir maksimums, nosaka toņu H grādos krāsu ritenī.
Praktisks piemērs
CMYK uz RGB solis jau ir tuvinājums, un HSL vērtības tiek noapaļotas uz veselām vienībām. Rezultāts ir ļoti tuvs atbilstībai, nevis krāsu pārvaldīta konversija.
CMYK un HSL izskaidrojums
Kas ir CMYK?
CMYK ir četru tintes modelis drukāšanai: cyan, magenta, yellow un key (melns), katrs procentos no 0 līdz 100. Tinte atņem gaismu, nevis izstaro to, tāpēc CMYK aptver mazāku krāsu diapazonu nekā ekrāns — tāpēc spilgtas ekrāna krāsas bieži izskatās blāvāk, kad tiek izdrukātas.
- Sintakse:
- cmyk(C%, M%, Y%, K%)
- Diapazons:
- 0–100% per ink
- Vislabāk piemērots:
- druka, iepakojums, gatava preses māksla
Kas ir HSL?
HSL sadala krāsu toņos (0–360° krāsu ritenī), piesātinājumā (cik krāsaina, 0–100%) un gaišumā (cik spilgta, 0–100%). Tā kā katra daļa atbilst tam, kā cilvēki apraksta krāsu, HSL ir visvienkāršākais formāts tintiņu, nokrāsu un konsekventu paletju veidošanai — gan manuāli, gan kodā.
- Sintakse:
- hsl(H, S%, L%)
- Diapazons:
- 0–360°, 0–100%, 0–100%
- Vislabāk piemērots:
- paletes, tintiņas un nokrāsas, tēmu veidošana
CMYK uz HSL atsauces tabula
Visizplatītākās CSS krāsas, konvertētas no CMYK uz HSL.
| Krāsa | 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%) |