Návody k barvám

Krátké praktické návody o barvách na obrazovce: formáty, kontrast, palety, tmavý režim a CSS. Každé číslo je spočítané, každý příklad lze zkopírovat.

OKLCH srozumitelně: barevný formát, který konečně odpovídá vašemu okuOKLCH popisuje barvu podle toho, jak světlá se jeví, jak výrazná je a jaký má barevný tón. Na rozdíl od HSL vypadá stejná hodnota světlosti opravdu stejně světle u všech tónů, takže palety, stavy při najetí myší (hover) i přístupný kontrast jsou předvídatelné.28. září 2026Čtení na 3 min
APCA vs. WCAG 2: kterému měření kontrastu věřitKontrastní poměr podle WCAG 2 je to, co vyžaduje zákon. APCA je novější model, který čitelnost předpovídá mnohem lépe, hlavně v tmavém režimu a u sytých barev. Když zkontrolujete obojí, získáte text, který splňuje předpisy a zároveň se opravdu dobře čte.28. září 2026Čtení na 3 min
Barevný gamut srozumitelně: sRGB, Display P3 a barvy mimo gamutGamut je množina barev, kterou obrazovka nebo barevný prostor dokáže zobrazit. Web vznikl na sRGB, ale většina telefonů a mnoho notebooků dnes zobrazuje Display P3, který má znatelně živější červené, zelené a oranžové.28. září 2026Čtení na 2 min
Barevné formáty srozumitelně: HEX, RGB, HSL, OKLCH a dalšíJednu barvu lze zapsat na tucet způsobů. Tady je, co který formát znamená, kdy ho použít a jak stejná barva vypadá ve všech z nich.28. září 2026Čtení na 2 min
Hex kódy barev srozumitelně: jak funguje #RRGGBBHex kód barvy jako #1e90ff tvoří tři dvojice šestnáctkových číslic: množství červeného, zeleného a modrého světla, každé od 00 (nic) po ff (naplno, 255). Čtvrtá dvojice nastavuje neprůhlednost: 80 znamená zhruba 50 %, ff zcela plnou barvu.28. září 2026Čtení na 5 min
Jak vybrat barevnou paletu pro web nebo aplikaciZačněte jednou firemní barvou, vygenerujte z ní škálu 50 až 950, přidejte lehce tónované šedé a čtyři sémantické barvy a pak otestujte každou dvojici textu a pozadí na kontrast a barvoslepost. Stupně vybírejte podle světlosti v OKLCH, ne od oka: na bílém pozadí projde text podle WCAG AA, jakmile světlost klesne zhruba na 0,55, a to u jakéhokoli tónu.28. září 2026Čtení na 6 min
Barvy pro tmavý režim: jak vybrat pozadí, text a akcentyMísto čisté černé použijte tmavě šedé pozadí, například #121212, místo čisté bílé lomenou bílou na text, například #e5e5e5, a světlejší, méně syté verze firemních barev. Text kontrolujte podle APCA i WCAG 2, protože WCAG 2 kontrast na tmavém pozadí přeceňuje.28. září 2026Čtení na 6 min
Barevné harmonie: komplementární, analogické, triadické a dalšíBarevná harmonie vybírá tóny v pevných úhlech na barevném kruhu: o 180° od sebe pro komplementární, o 30° pro analogické, o 120° pro triadické. Když tón otáčíte v OKLCH místo v HSL, zůstanou barvy stejně světlé a žádná náhodou nevyčnívá.28. září 2026Čtení na 5 min
CSS color-mix() a relativní barvy: světlejší varianty, hover a průhlednostcolor-mix() smíchá dvě barvy v barevném prostoru, který si zvolíte, a syntaxe relativních barev vám dovolí upravit jeden kanál existující barvy, například oklch(from var(--brand) calc(l - 0.1) c h). Obojí běží v prohlížeči, funguje s proměnnými CSS a nahradí většinu barevných funkcí Sass. Světlejší varianty a hover míchejte v oklab, průhlednost v srgb.28. září 2026Čtení na 6 min
Paleta přátelská k barvoslepým: jak barvy zkontrolovat a opravitPaleta přátelská k barvoslepým udrží každou dvojici barev rozlišitelnou při protanopii, deuteranopii, tritanopii i ve stupních šedi. Nejspolehlivější řešení není zvláštní tón, ale rozdíl ve světlosti: barvy vzdálené zhruba 0,2 ve světlosti OKLCH zůstaly odlišné ve všech simulacích, které jsme spustili. Doplňte to ikonami nebo popisky, protože samotná barva vždycky pro někoho selže.28. září 2026Čtení na 6 min
Barvy v Tailwind CSS: paleta v4 v OKLCH, vlastní barvy a stupněTailwind CSS v4 obsahuje 26 barevných škál po 11 stupních od 50 do 950, celkem 286 barev definovaných v OKLCH jako proměnné CSS typu --color-blue-500. Vlastní přidáte přes @theme { --color-brand-500: oklch(...) }. Stejné číslo stupně neznamená stejnou světlost: blue-600 je nejsvětlejší modrá, která na bílé projde 4,5:1, kdežto žlutá potřebuje 700.28. září 2026Čtení na 6 min