RGB nestačí: farebné notácie HSL, CMYK a OKLCH

V predchádzajúcom článku, Ako počítač vytvára farby: RGB, HEX a binárne čísla, sme zistili, že farba sú len tri čísla — červená, zelená, modrá, každá v rozsahu 0–255. Pre obrazovku to plne postačuje. Len čo však človek začne s farbou pracovať, RGB sa rýchlo stáva nepraktickým.

RGB je pohodlné, ale nie intuitívne

„Trochu svetlejšia červená.” Ako to dosiahnuť v RGB? Treba mierne zvýšiť všetky tri kanály naraz. „Chcem trochu znížiť sýtosť” — pri pohľade len na RGB neviete, ktorý kanál upraviť. „Vytlačte túto farbu presne na papier” — to RGB jednoducho neumožňuje.

Ostatné farebné modely vznikli práve preto, aby tieto problémy riešili.

HSL — farba tak, ako o nej uvažuje človek

HSL delí farbu na tri zložky: farebný odtieň · sýtosť · svetlosť. hsl(14, 100%, 60%) je tá istá farba ako #FF5733, no je ihneď jasné, čo ktorá hodnota znamená.

Ak je RGB jazykom počítača, HSL je jazykom dizajnéra. Tú istú farbu možno upravovať z pohľadu čo chcete zmeniť.

Hue — farebný odtieň je kruh 360°

Odtiene sa pohybujú po kruhu ako hodiny — od 0° do 360°. Hodnoty 0° a 360° sú tá istá červená.

Saturation — sýtosť farby

Rovnaký odtieň pri znižovaní sýtosti postupne prechádza do sivej.

Lightness — svetlosť od čiernej po bielu

L = 0% je vždy čierna, L = 100% je vždy biela. 50% zodpovedá „prirodzenej” svetlosti danej farby.

Skutočná sila HSL — tvorba paliet

Ak zachováte rovnaký Hue a meníte len L, dostanete farebnú sadu, ktorá prirodzene ladí. Totéž v RGB by si vyžadovalo ručný výpočet každej z 9 hodnôt; v HSL stačí meniť L krok za krokom od 12% po 92%.

Obe palety vyššie sa dajú vytvoriť jedným blokom kódu.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... stačí meniť L po 10 */
}

Práve pri tvorbe dizajnového systému sa HSL ukáže v celej svojej sile.

CMYK — jazyk atramentu

Ak chcete naniesť farbu nie na obrazovku, ale na papier, potrebujete úplne iný systém. CMYK udáva pomer štyroch atramentiov používaných v tlačiarni.

Prečo sa čierna označuje „K” a nie „B”? Pretože B by sa pletlo s Blue. Navyše pochádza z tlačiarenského termínu „key plate” — základná doska, podľa ktorej sa zarovnávajú ostatné atramentové vrstvy.

Svetlo sa sčítava, atrament sa odčítava

Najväčší rozdiel medzi RGB a CMYK je spôsob miešania.

Červený atrament sa javí ako červený preto, lebo absorbuje ostatné farby svetla a odráža len červenú. Atrament svetlo odčerpáva. Preto čím viac atramentiov zmiešate, tým je farba tmavšia. Teoreticky by CMY dohromady malo dať čiernu, v praxi však vznikne nečistá hnedá — preto existuje samostatný čierny atrament (K).

Kde sa CMYK používa

Ak pracujete na dizajne pre obrazovky, CMYK takmer nepotrebujete. Objavuje sa výhradne pri tlači na papier.

• Pri odovzdávaní súborov do tlačiarne — vizitky, plagáty, knihy, obaly. Tlačiarne dostanú RGB súbor a prevedú ho do CMYK.
• Pri tlačových prácach v Photoshop / Illustrator — farebný režim sa nastaví na CMYK hneď od začiatku.
• Brandová príručka — obsahuje HEX pre obrazovky aj CMYK pre tlač. Tá istá firemná farba musí na oboch médiách vyzerať podobne.

Prečo sa farby na obrazovke a v tlači líšia — Gamut

Rozsah farieb zobraziteľných na obrazovke (RGB gamut) a rozsah farieb reprodukovateľných atramentom (CMYK gamut) sú odlišné. Žiarivá neónová ružová z obrazovky sa v tlači nedosiahne — atrament ju jednoducho nedokáže vytvoriť.

Preto tlačoví dizajnéri pred začiatkom práce vyberajú len farby v rámci CMYK rozsahu. Bežne sa stáva, že dizajn vytvorený v RGB vyzerá po vytlačení bledší a tlmenejší.

Ako sa zapisujú hodnoty CMYK

Uvádza sa, koľko percent každého atramentu sa nanesie. 0% znamená žiadny atrament, 100% znamená plné množstvo.

Ak použijete len K 100%, dostanete špinavú čiernu blízku sivej. V tlačiarni sa preto K dopĺňa o CMY, čím vznikne hlboká, sýta čierna.

OKLCH — súradnice pre ľudské vnímanie

Farebný model, ktorý sa začal presadzovať v 20. rokoch 21. storočia. Kľúčové slovo: „prirodzené pre ľudské oko.”

Tri súradnice vyzerajú podobne ako v HSL:

• L — Lightness (svetlosť, 0–1)
• C — Chroma (sýtosť, 0 – cca 0,4)
• H — Hue (farebný odtieň, 0–360°)

HSL má však skrytý problém. Aj keď je L = 50% rovnaké, rôzne farby pôsobia úplne inak svetlo. Porovnajme to na príklade.

Stručne: RGB a HSL sú súradnice pre stroj. OKLCH sú súradnice pre človeka.

L · C · H — čo každá súradnica robí

Pozrime sa, čo sa stane, keď zmeníme len jednu súradnicu tej istej farby.

Kde sa OKLCH uplatňuje

• Paleta s jednotnou svetlosťou — keď chcete 8 kategórií v rovnako vnímanej svetlosti
• Automatický prepočet dark/light módu — stačí inverzia hodnoty L a vznikne prirodzená tmavá téma
• Dostupnosť (accessibility) — rozdiel svetlosti medzi textom a pozadím je presne predvídateľný
• Prechody (gradienty) — plynulý tok bez sivého pásu uprostred

OKLCH je oficiálne súčasťou CSS Color Level 4 a dá sa používať priamo v moderných prehliadačoch.

.btn { background: oklch(67% 0.18 30); }       /* oranžová */
.btn:hover { background: oklch(60% 0.18 30); } /* zníženie L o 7 → presne o toľko tmavšie */

Čo a kedy použiť

Na väčšinu digitálnych prác postačuje RGB/HEX. HSL sa hodí pri tvorbe paliet, OKLCH výrazne pomáha pri dizajne dark/light módu.

Ako pracovať s farbami v fns

Keď viete, že farba je číslo, ďalší krok je mať najpoužívanejšie farby vždy po ruke. fns zjednocuje celý tok — vybranie, uloženie a opätovné použitie farby — za jednou klávesou.

Eyedropper — snímanie farby kdekoľvek na obrazovke — ⌘+Shift+K

Eyedropper je nástroj, ktorý presne zachytí farbu ľubovoľného pixela na obrazovke. Je to ako keby ste picker dostupný len vo Figma/Photoshop sprístupnili v celom systéme.

Stlačte ⌘+Shift+K a Eyedropper fns sa zobrazí kdekoľvek na obrazovke. Jeden pixel v dizajnovom návrhu, konkrétna oblasť fotografie, farba pozadia inej aplikácie — stačí presunúť myš a kliknúť a farbu presne zachytíte.

• Pri každom kliknutí sa farba automaticky uloží do schránky. Nepotrebujete samostatný príkaz „kopírovať”.
• Priamo vo widgete Eyedropper si vyberiete, v akom formáte (RGB / HEX / HSL / CMYK / OKLCH) sa farba uloží do schránky.
• Zobrazí sa vizuálny náhľad zachytenej farby aj najbližšie systémové farby.

Eyedropper → automatické uloženie do schránky → opätovné načítanie v pickeri schránky — tok sa nikde nepretrhne. Nepotrebujete otvárať Mac Digital Color Meter ani zakaždým stláčať skratku na kopírovanie.

Schránka automaticky rozpoznáva farby

História schránky fns automaticky zistí, či je skopírovaný text kód farby — bez ohľadu na formát.

Keď farbu znova načítavate z histórie, je ťažké si z textu samotného vybaviť, o akú farbu išlo. fns zobrazuje vedľa každej položky malý farebný čip, takže farbu spoznáte na prvý pohľad.

Zobraziť len farby

Jediným klávesom môžete v histórii schránky filtrovať iba kódy farieb. Keď pri dizajnérskej práci chcete vidieť len nedávno použité farby, nemusíte prehrabávať texty, URL ani kód.

• V tom istom pickeri zadáte kľúčové slovo filtra ako color: → zobrazia sa len položky s farbami
• Vyhľadávanie podľa názvu farby — „blue”, „red” vyfiltruje len príslušné odtiene
• Podobné farby sú vizuálne zoskupené a zoradené

Farbu v inom formáte

Tú istú farbu môžete previesť do iného zápisu a načítať. Keď skopírujete #FF5733 z Figma a chcete ho vložiť do CSS ako rgb(...), stačí v pickeri schránky fns vybrať danú položku a jednou skratkou sa automaticky konvertuje.

Pri prechode medzi Figma (HSB) a CSS (HSL/HEX/OKLCH) už nemusíte zakaždým otvárať konverter.

Rozbaľovanie textu a zoskupovanie

Najpoužívanejšie farby brandy si zaregistrujete ako textové skratky.

Tá istá skratka funguje všade — v CSS, v políčku na zadanie farby vo Figma, v správach na Slacku aj v editore kódu. Čas strávený vyhľadávaním a kopírovaním farieb z brandovej príručky zmizne.

Čas, ktorý ste strácali otváraním konvertera a prevádzaním kódov farieb do iných formátov, môžete ušetriť s fns.

Zaujíma vás, odkiaľ tieto čísla vôbec pochádzajú — základy troch kanálov RGB, binárnej sústavy a notácie HEX? Začnite článkom Ako počítač vytvára farby: RGB, HEX a binárne čísla.