Przenoszenie palety z druku na web jest łatwiejsze w HSL: gdy mieszanka tuszu jest wyrażona jako odcień, nasycenie i jasność, możesz w kilka sekund zbudować stany hover, tinty i shade'y.
Jak działa konwersja z CMYK na HSL
- Zamień procenty CMYK na kanały RGB między 0 a 255.
- Podziel kanały przez 255 i oblicz ich maksimum oraz minimum.
- Średnia maksimum i minimum to jasność L, a ich rozpiętość determinuje nasycenie S.
- Kanał trzymający maksimum determinuje odcień H w stopniach na kole barw.
Przykład działania
Krok CMYK → RGB jest już przybliżeniem, a wartości HSL są zaokrąglane do liczb całkowitych. Wynik to bardzo bliskie dopasowanie, nie zarządzana kolorystycznie konwersja.
Wyjaśnienie CMYK i HSL
Czym jest CMYK?
CMYK to model czterech farb używany w druku: cyan, magenta, yellow i key (czarny), każdy jako procent od 0 do 100. Farba odejmuje światło zamiast je emitować, więc CMYK obejmuje mniej kolorów niż ekran — dlatego jaskrawe kolory ekranowe często wyglądają na bardziej stonowane po wydruku.
- Składnia:
- cmyk(C%, M%, Y%, K%)
- Zakres:
- 0–100% na farbę
- Najlepsze do:
- druk, opakowania, pliki gotowe do druku
Czym jest HSL?
HSL dzieli kolor na odcień (0–360° na kole barw), nasycenie (jak intensywny, 0–100%) i jasność (jak jasny, 0–100%). Ponieważ każdy element odpowiada temu, jak ludzie opisują kolor, HSL jest najłatwiejszym formatem do tworzenia tonów, cieni i spójnych palet — ręcznie lub w kodzie.
- Składnia:
- hsl(H, S%, L%)
- Zakres:
- 0–360°, 0–100%, 0–100%
- Najlepsze do:
- palety, tony i cienie, theming
Tabela odniesienia z CMYK na HSL
Najczęściej używane kolory CSS, skonwertowane z CMYK na HSL.
| Kolor | 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%) |