Přenést tiskovou paletu na web je v HSL jednodušší: jakmile máš mix inkoustu vyjádřený jako odstín, sytost a světlost, můžeš z něj za sekundy vytvořit hover stavy, tinty a stíny.
Jak funguje převod z CMYK na HSL
- Převeď CMYK procenta na RGB kanály v rozsahu 0 až 255.
- Vyděl kanály 255 a vezmi jejich maximum a minimum.
- Průměr maxima a minima je světlost L, jejich rozptyl určuje sytost S.
- Kanál s maximální hodnotou určuje odstín H v stupních na barevném kruhu.
Ukázkový příklad
Krok z CMYK na RGB je už sám o sobě aproximací a hodnoty HSL se zaokrouhlují na celá čísla. Výsledek je velmi blízká shoda, ne průběžně spravovaný barevný převod.
CMYK a HSL vysvětleno
Co je CMYK?
CMYK je model čtyř barev používaný v tisku: cyan, magenta, yellow a key (černá), každý jako procento od 0 do 100. Inkoust odečítá světlo místo jeho emitování, takže CMYK pokrývá méně barev než obrazovka — proto jasné barvy na obrazovce často vypadají po tisku mdlěji.
- Syntaxe:
- cmyk(C%, M%, Y%, K%)
- Rozsah:
- 0–100% na inkoust
- Nejlepší pro:
- tisk, balení, podklady připravené pro tisk
Co je HSL?
HSL rozděluje barvu na odstín (hue, 0–360° na barevném kruhu), sytost (saturation, jak barevná, 0–100%) a jas (lightness, jak světlá, 0–100%). Protože každá část odpovídá způsobu, jak lidé barvy popisují, je HSL nejjednodušší formát pro vytváření odstínů, tónů a konzistentních palet — ručně i v kódu.
- Syntaxe:
- hsl(H, S%, L%)
- Rozsah:
- 0–360°, 0–100%, 0–100%
- Nejlepší pro:
- palety, odstíny a tóny, theming
Referenční tabulka CMYK na HSL
Nejběžnější CSS barvy převedené z CMYK na HSL.
| Barva | 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%) |