RGB nestačí: barevné notace HSL, CMYK a OKLCH

V předchozím článku, Jak počítač vytváří barvy: RGB, HEX a dvojková soustava, jsme zjistili, že barva jsou jen tři čísla — červená, zelená, modrá, každá v rozsahu 0–255. Pro obrazovku to plně postačuje. Jakmile ale člověk začne s barvou pracovat, RGB se rychle stává nepraktickým.

RGB je praktické, ale neintuitivní

„Trochu světlejší červená.” Jak to udělat v RGB? Musíte mírně zvýšit všechny tři kanály najednou. „Chci jen trochu snížit sytost” — z pohledu na RGB hodnoty nevíte, co upravit. „Vytiskněte tuto barvu přesně takto” — s RGB to prostě nejde.

Ostatní způsoby zápisu barev vznikly právě proto, aby tyto problémy řešily.

HSL — barvy tak, jak je vnímá člověk

HSL rozděluje barvu na tři složky: barevný tón · sytost · světlost. hsl(14, 100%, 60%) je tatáž barva jako #FF5733, ale je okamžitě jasné, co která hodnota znamená.

Pokud je RGB jazykem počítače, pak HSL je jazykem designéra. Umožňuje pracovat se stejnou barvou z pohledu toho, co chcete změnit.

Hue — barevný tón je 360° kruh

Barevný tón se točí jako hodinová ručička — od 0° do 360°. Hodnoty 0° a 360° jsou totéž: červená.

Saturation — sytost určuje intenzitu barvy

Snížíte-li sytost u stejného barevného tónu, výsledek se postupně blíží šedé.

Lightness — světlost od černé po bílou

L = 0% je vždy černá, L = 100% je vždy bílá. Hodnota 50 % odpovídá „přirozené” světlosti dané barvy.

K čemu je HSL nejužitečnější — tvorba palet

Zachováte-li barevný tón (Hue) a měníte pouze L, vznikne přirozeně sladěná skupinka barev. V RGB byste museli ručně vypočítat všech 9 políček, v HSL stačí postupně měnit L od 12 % do 92 %.

Obě palety lze sestavit na jediném řádku.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... Stačí měnit L po 10 krocích */
}

Právě zde HSL nejvíce září při tvorbě design systémů.

CMYK — jazyk inkoustu

Chcete-li nanášet barvu na papír místo na obrazovku, potřebujete úplně jiný systém. CMYK udává poměry čtyř tiskových inkoustů.

Proč se černá označuje „K” a ne „B”? Písmeno B by se pletlo s Blue. Označení K pochází z tiskařského termínu „key plate” — referenční deska, podle níž se zarovnávají ostatní inkousty.

Světlo sčítáním zesvětlí, inkoust sčítáním ztmavne

Největší rozdíl mezi RGB a CMYK spočívá ve způsobu míchání.

Červený inkoust vypadá červeně proto, že pohlcuje ostatní světlo a odráží pouze červené. Inkoust světlo ubírá. Proto čím více inkoustů smícháte, tím tmavší výsledek. Teoreticky by CMY dohromady měly dát černou, ale ve skutečnosti vznikne jen kalně hnědá. Proto existuje samostatný černý inkoust (K).

Kde se CMYK používá?

Při digitálním designu se s CMYK téměř nesetkáte — přichází ke slovu jen při tisku.

• Při předávání souborů do tiskárny — vizitky, plakáty, knihy, obaly. Tiskárna přijme-li RGB soubor, sama ho převede na CMYK.
• Při práci v Photoshop / Illustrator pro tisk — barevný režim se nastavuje na CMYK hned od začátku.
• Brand manuál — uvádí HEX pro obrazovku i CMYK pro tisk vedle sebe, aby firemní barva vypadala podobně na obou médiích.

Proč se barvy obrazovky a tisku liší — Gamut

Barevný rozsah obrazovky (RGB gamut) a inkoustů (CMYK gamut) se neshoduje. Živě zářivá fuchsiová z monitoru se v tisku nedosáhne — inkoustem ji prostě vyrobit nelze.

Proto tiskoví designéři předem vybírají jen barvy dostupné v CMYK gamu. Tisk designu vytvořeného v RGB bez konverze obvykle vypadá mrtvolně a tlumeně.

Jak se zapisují hodnoty CMYK

Každý inkoust dostane procento. 0 % znamená vůbec nenanesený, 100 % plné pokrytí.

Černá z pouhého K 100 % vychází jako kalně šedá. Tiskárny proto přidají CMY a dosáhnou hlubší černé.

OKLCH — souřadnice pro lidi

Barevný model, který se ve 20. letech 21. století prosadil naplno. Klíčové heslo: „přirozeně pro lidské oko.”

Tři souřadnice vypadají podobně jako v HSL:

• L — Lightness (světlost, 0–1)
• C — Chroma (sytost, 0–cca 0,4)
• H — Hue (barevný tón, 0–360°)

HSL má ale skrytý problém: stejná hodnota L = 50 % nevypadá u různých barev stejně světle. Porovnejte sami.

Jednou větou: RGB a HSL jsou souřadnice stroje. OKLCH jsou souřadnice člověka.

Role L · C · H každé zvlášť

Podívejte se, co se stane, když u stejné barvy změníte jen jednu souřadnici.

Kde se OKLCH využívá?

• Paleta s jednotnou světlostí — chcete-li sladit 8 kategorijních barev na stejnou vnímanou úroveň
• Automatická konverze dark/light módu — inverze L hodnoty dá přirozeně tmavé téma
• Přístupnost — přesná předpověď kontrastu světlosti textu a pozadí
• Přechody — plynulý gradient bez šedého pruhu uprostřed

Od CSS Color Level 4 je OKLCH oficálně podporován a funguje přímo v moderních prohlížečích.

.btn { background: oklch(67% 0.18 30); }       /* oranžová */
.btn:hover { background: oklch(60% 0.18 30); } /* L sníženo o 7 → přesně o tolik tmavší */

Co a kdy používat?

Pro většinu digitálních prací RGB/HEX zcela postačí. HSL se hodí při tvorbě palet, OKLCH výrazně usnadní design dark/light módu.

Jak fns pracuje s barvami

Jakmile víte, že barva je číslo, logickým dalším krokem je mít oblíbené barvy vždy po ruce. fns sdružuje načítání, ukládání a opětovné použití barev za jednu klávesu.

Eyedropper — snímejte barvu kdekoliv na obrazovce — ⌘+Shift+K

Eyedropper zachytí přesnou barvu libovolného pixelu na obrazovce. Je to picker dostupný pouze uvnitř Figma/Photoshop — přenesený do celého systému.

Stisknutím ⌘+Shift+K se Eyedropper fns otevře kdekoliv na obrazovce. Jeden pixel z designového podkladu, konkrétní oblast fotografie, barva pozadí jiné aplikace — stačí přesunout myš a kliknout.

• Každý klik automaticky uloží barvu do schránky. Žádný extra krok pro „kopírovat”.
• V ovládacím prvku Eyedropper si vyberete formát, v jakém se barva uloží: RGB / HEX / HSL / CMYK / OKLCH.
• Zobrazí se vizuální náhled zachycené barvy i nejbližší systémové barvy.

Eyedropper → automatické uložení do schránky → opětovné vyvolání z pickeru schránky — tok se nepřeruší. Není třeba otevírat Digital Color Meter jako u Macu ani pokaždé tisknout zkratku pro kopírování.

Schránka automaticky rozpoznává barvy

Historie schránky fns automaticky detekuje, zda zkopírovaný text je kódem barvy — bez ohledu na formát.

Když chcete zkopírovanou barvu znovu najít v historii, pouhý text nestačí. fns zobrazí vedle každé položky malý barevný čip, takže barvu poznáte na první pohled.

Zobrazení pouze barev

Jednou klávesou vyfiltrujete z historie schránky pouze kódy barev. Při designové práci, kdy chcete vidět jen nedávno použité barvy, se nemusíte prokousávat texty, URL adresami a kódem.

• Filtrační klíčové slovo jako color: přímo v pickeru → zobrazí pouze barevné položky
• Vyhledávání podle názvu barvy — „blue”, „red” zobrazí pouze odpovídající odstíny
• Podobné barvy se vizuálně seskupí

Převod barvy do jiného formátu

Stejnou barvu lze vytáhnout v jiném formátu zápisu. Zkopírujete #FF5733 z Figmy a chcete ji vložit do CSS jako rgb(...) — vyberete tu položku v pickeru schránky fns a jednou zkratkou proběhne automatická konverze.

Přecházíte-li mezi Figmou (HSB) a CSS (HSL/HEX/OKLCH), nemusíte pokaždé otevírat konvertor.

Textová zkrácení a seskupení

Frequently používané firemní barvy lze zaregistrovat jako textové zkratky.

Stejná zkratka funguje kdekoliv — v poli pro barvu ve Figmě, ve Slack zprávě, v editoru kódu nebo v CSS. Přestanete trávit čas hledáním firemní barvy v brand manuálu.

Čas strávený otevíráním konvertorů a přepisováním kódů barev do jiných formátů — zkuste ho zkrátit pomocí fns.

Zajímá vás, odkud tato čísla vůbec pochází — základy tří kanálů RGB, dvojkové soustavy a notace HEX? Začněte článkem Jak počítač vytváří barvy: RGB, HEX a dvojková soustava.