Článek

Barevné nástroje pro web: hex, palety a přístupnost

Výběr barev pro web vypadá jednoduše, dokud nenarazíte na hex kódy, trojice RGB a úhly HSL, které všechny popisují tutéž věc různými způsoby. Tento článek vysvětluje, jak spolu tyto formáty souvisejí, jak z jediné barvy značky udělat použitelnou paletu a jak zajistit, aby výsledek zůstal čitelný i pro lidi, kteří barvy vnímají jinak.

Napsal Bastien Sulyan · Publikováno dne 21. června 2026

Hex, RGB a HSL popisují tutéž barvu

Barva na obrazovce vzniká mícháním červeného, zeleného a modrého světla. Zápis hex vyjadřuje tyto tři kanály jako šestiznakový kód, například #2563eb, kde každá dvojice znaků je jeden kanál od 00 do ff. RGB píše stejná tři čísla v desítkové soustavě, od 0 do 255, což se čte snáz, ale nic víc nesděluje. HSL volí jiný úhel pohledu: popisuje barvu jejím odstínem (poloha na barevném kole od 0 do 360 stupňů), sytostí (jak je barva výrazná) a světlostí (jak blízko je k bílé nebo černé). HSL je formát, po kterém návrháři sahají, když chtějí barvu jemně doladit, protože zvýšení světlosti nebo posun odstínu je jediná intuitivní změna, ne tři provázaná čísla. Převodník umožní přecházet mezi všemi třemi, takže můžete hodnotu přečíst v jednom formátu a použít ji v jiném.

Stejná jantarová barva zapsaná třemi způsoby: hex #E8A33D, rgb(232, 163, 61) a hsl(36, 79%, 57%).

Jak z jedné barvy udělat paletu

Jediná barva značky málokdy stačí. Funkční paleta obvykle potřebuje primární barvu, jeden nebo dva akcenty a sadu neutrálních šedí pro text a pozadí. Vztahy mezi barvami se řídí jednoduchými pravidly na barevném kole: komplementární barvy leží naproti sobě, analogické barvy sousedí a působí klidně a triáda rozkládá tři barvy rovnoměrně pro kontrast bez disharmonie. Nástroj na barevná schémata tato pravidla použije na vaši výchozí barvu a dá vám odpovídající hex kódy, takže úhly nemusíte počítat ručně. Pokud už máte obrázek, jehož náladu máte rádi, extraktor palety z něj přečte převažující barvy, což je rychlý způsob, jak postavit web na fotografii nebo logu.

Kontrast a barvoslepost

Paleta, která vypadá dobře na vaší obrazovce, může čtenáře přesto zklamat. Zhruba jeden ze dvanácti mužů a jedna ze dvou set žen mají nějakou formu poruchy barevného vidění, nejčastěji potíže s rozlišením červené od zelené. Pokud je vaším jediným signálem chyby červený text na zeleném tlačítku, tito čtenáři ho přehlédnou. Řešením není barvy se vyhýbat, ale nikdy se nespoléhat jen na barvu: doplňte ji ikonou, popiskem nebo tvarem a udržujte dostatečný kontrast světlosti mezi textem a jeho pozadím. Simulátor barvosleposti vám ukáže, jak vaše paleta vypadá při běžných typech barevného vidění, takže problém zachytíte ještě před nasazením, ne až po stížnosti.

Dvě ukázky textu na tmavé kartě: text s nízkým kontrastem, který neprojde WCAG AA pod 4,5:1, a čitelný text, který projde při 4,5:1 nebo více.

Jak to všechno udělat v prohlížeči

Žádný z těchto kroků nepotřebuje server. Převod hex kódu, vygenerování schématu, vyčtení barev z obrázku i simulace barvosleposti jsou malé výpočty, které prohlížeč zvládne okamžitě. To má význam ve chvíli, kdy je obrázek, ze kterého vzorkujete, nezveřejněný návrh nebo logo klienta: se zdejšími nástroji zůstává soubor ve vašem zařízení a nic se neodesílá. Dostanete stejný výsledek jako od online služby, aniž byste podklady kamkoli předávali. Převodník barev, generátor barevných schémat, extraktor palety i simulátor barvosleposti běží lokálně a fungují stejně i offline, jakmile se stránka načte.

OKLCH a širší barevné prostory

Hex, RGB a HSL popisují barvy uvnitř barevného gamutu sRGB, který displeje používají již řadu let. Novější displeje zobrazí více a CSS na ně nyní dosáhne pomocí funkce color() a prostoru Display P3, který přidává živé zelené a červené odstíny, jež sRGB nedokáže vyjádřit. Větší změnou je OKLCH, způsob zápisu barvy jako světlosti, chromy a odstínu (hue), který odpovídá tomu, jak oko skutečně vnímá jas. V HSL nevypadá žlutá a modrá se stejnou 50% světlostí nijak podobně: žlutá působí světle, modrá tmavě. V OKLCH při zachování pevné světlosti a změně pouze odstínu zůstane vnímaný jas stabilní. To usnadňuje sestavení palety, kde každý tón splní stejný cíl kontrastu pouhou fixací jednoho čísla, místo ručního dolaďování každé barvy.

Nástroje v tomto článku

Časté dotazy

Jaký je rozdíl mezi hex a RGB?

Jsou to dva způsoby zápisu téže barvy. Hex sbalí kanály červené, zelené a modré do šestiznakového kódu v šestnáctkové soustavě, zatímco RGB vypíše stejné tři kanály jako desítková čísla od 0 do 255. #ff0000 a rgb(255, 0, 0) jsou tatáž červená. Hex je kompaktní a běžný v CSS a návrhových souborech, RGB se čte na první pohled snáz a převod mezi nimi na samotné barvě nic nemění.

Jak poznám, zda jsou mé barvy čitelné pro uživatele s barvoslepostí?

Proveďte svou paletu simulátorem barvosleposti, který vaše barvy překreslí tak, jak by je viděl člověk s každým běžným typem barevného vidění. Sledujte dvojice, které splynou do téhož odstínu, zejména červené a zelené. Nejbezpečnější návyk je nikdy nepoužívat barvu jako jediný signál: podpořte ji textem, ikonou nebo vzorem a udržujte jasný rozdíl světlosti mezi popředím a pozadím, aby význam přežil i tehdy, když odstín ne.