RGB vs HEX vs HSL vs CMYK: Průvodce konečným barevným formátem

Pokud jste se někdy pokoušeli navrhnout web, vytvořit logo nebo vytisknout vizitku, okamžitě jste narazili na matoucí abecední polévku barevných kódů: HEX, RGB, HSL a CMYK. Proč existuje tolik způsobů, jak popsat jednoduchý odstín modré?

Pravda je, že počítače a tiskárny „vidí“ světlo zásadně odlišným způsobem. Navíc to, jak počítače zpracovávají světlo, není nutně tím, jak lidský mozek interpretuje barvy. Pochopení těchto formátů není jen teorie – ušetří vám to zavádění webů s nepřístupnými kontrastními poměry nebo placení tisíců dolarů za marketingové letáky, které vypadají zabláceně a tmavě.

Aditivní versus subtraktivní světlo

Než se ponoříme do kódu, musíme zjistit fyzický rozdíl mezi obrazovkami a papírem.

• Obrazovky vyzařují světlo (aditivní). Pokud vypnete všechny pixely, obrazovka bude černá. Aby byla bílá, obrazovka vyšle červené, zelené a modré světlo s maximální intenzitou.
• Papír odráží světlo (subtraktivní). Prázdný papír je již bílý (odráží veškeré světlo). Aby byla černá, tiskárna na sebe navrství azurový, purpurový a žlutý inkoust, aby absorbovaly veškeré světlo.

1. RGB (červená, zelená, modrá)

RGB je rodný jazyk monitoru vašeho počítače. Definuje barvu tak, že přesně sdělí obrazovce, kolik červeného, ​​zeleného a modrého světla má vyzařovat. Každý kanál je reprezentován celým číslem od 0 (vypnuto) do 255 (maximální intenzita).

Například čistě červená je rgb(255, 0, 0). Čistě bílá je rgb(255, 255, 255).

Nejlepší pro: úpravy obrázků (Photoshop) a digitální fotografie. Přímo manipuluje s hardwarovými pixely.

2. HEX (hexadecimální)

HEX kódy, jako #FF5733, jsou přesně to samé jako RGB. Jediný rozdíl je v matematice. Namísto čísel se základem 10 (0-255) používá šestnáctková šestnáctková čísla (00 až FF). První dvě písmena určují červenou, prostřední dvě zelenou a poslední dvě modrou.

Proč weboví vývojáři používají HEX? Protože je kratší. Zápis #FFF je pro vývojáře CSS mnohem rychlejší než zápis rgb(255, 255, 255).

Nejlepší pro: Pevné kódování barev značky v CSS. Je stručný a snadno kopírovatelný mezi návrhářskými nástroji, jako je Figma, a editory kódu.

3. HSL (odstín, sytost, světlost)

RGB a HEX jsou pro lidi hrozné. Pokud vám ukážu kód #4A90E2, nemůžete snadno uhodnout, jakou barvu má. Pokud vás požádám, abyste „udělali tu modrou o 20 % tmavší“, je téměř nemožné počítat v HEX.

HSL byl navržen pro lidský mozek. Definuje barvu v 360stupňovém barevném kole.

• Hue (0-360): Skutečná barva. 0 je červená, 120 je zelená, 240 je modrá.
• Sytost (0–100 %): Jak intenzivní je barva. 0 % je šedá, 100 % je zářivá.
• Světlost (0–100 %): Jak je tmavá nebo světlá. 0 % je černá, 100 % je bílá.

Pokud je vaše modrá značka hsl(210, 100 %, 50 %) a chcete tmavší odstín pro efekt najetí na tlačítko, jednoduše změňte poslední číslo: hsl(210, 100 %, 40 %). Je to kouzlo pro architekturu CSS.

4. CMYK (azurová, purpurová, žlutá, klíčová/černá)

CMYK je čistě pro fyzický svět. Určuje, jak tiskárna míchá fyzický inkoust. Protože inkoust absorbuje světlo, barevný prostor je fyzicky menší než RGB. Existují zářivé neonové zelené, které může obrazovka vydávat (v RGB), které tiskárna fyzicky nemůže tisknout (ve CMYK).

Zlaté pravidlo: Nikdy neposílejte soubor RGB na komerční tiskárnu. Tiskárna jej násilně převede na CMYK, což bude mít za následek, že vaše živé barvy budou zablácené a vybledlé. Před odesláním do tiskárny vždy převeďte své návrhy do CMYK.

Srovnávací matice

Format	Environment	Readability	Primary Use Case
HEX	Digital	Low	Standard web design, copying from Figma
RGB	Digital	Medium	Manipulating alpha transparency (rgba)
HSL	Digital	High	Dynamic CSS theming, Dark Modes
CMYK	Physical Print	N/A	Business cards, flyers, packaging

Často kladené otázky (FAQ)