Proč je „green“ v CSS tmavší než zelená ve výběru RGB?

Klíčové slovo green je #008000, středně zelená zděděná ze staré 16barevné palety HTML. Plně sytá #00FF00 se jmenuje lime. Celý seznam CSS má podobná překvapení: gray (#808080) je tmavší než darkgray (#A9A9A9).

Nahrává se můj obrázek, když z něj získávám paletu?

Ne. Soubor otevře váš prohlížeč, v paměti ho vykreslí na canvas a tam ho analyzuje. S obrázkem se neodesílá žádný požadavek a zavřením karty se zahodí.

Jaký kontrastní poměr potřebuji pro běžný text?

Alespoň 4,5:1 pro splnění WCAG 2.1 úrovně AA a 7:1 pro úroveň AAA. Nadpisy o velikosti 18 bodů a více nebo 14 bodů tučně mohou pro AA používat 3:1. Mnoho designových systémů cílí všude na 4,5:1, aby byl text čitelný na tlumených displejích i na slunci.

Mohu použít osmimístný kód HEX s průhledností?

Ano, v CSS. Poslední dvě číslice tvoří alfa kanál, takže #2F6FED80 je stejná modrá s průhledností asi 50 %. Tento výběr barev pracuje s plně krycími barvami, proto ukazuje šest číslic; dvojici alfa si v případě potřeby doplňte sami.

Kolik pojmenovaných barev má CSS?

CSS Color Module Level 4 definuje 148 klíčových slov barev, včetně duplicitních pravopisů jako gray a grey. Nejnovější je rebeccapurple (#663399), přidaná v roce 2014 na památku Rebeccy Meyerové, dcery autora CSS Erica Meyera.

Výběr barvy

Vyberte libovolnou barvu a získejte její kód ve všech běžných formátech připravený ke zkopírování. Vytvořte ladicí palety, vytáhněte dominantní barvy fotky, aniž byste ji nahrávali, a ověřte, zda dvojice textu a pozadí splňuje kontrast podle WCAG.

Vybraná barva#2F6FED

VybratHEX

Odstín220°Sytost84%Světlost56%

Kódy barvy ve všech formátech

HEX#2F6FED
RGB47, 111, 237
HSL220°, 84%, 56%
HSB / HSV220°, 80%, 93%
CMYK (přibl.)80%, 53%, 0%, 7%
CSS rgb()rgb(47 111 237)
CSS hsl()hsl(220 84% 56%)

Palety z této barvy

Komplementární

Analogická

Triadická

Světlejší odstíny (smíchané s bílou)

Tmavší odstíny (smíchané s černou)

Paleta z obrázku

Váš obrázek čte přímo váš prohlížeč a nikam se nenahrává: pixely se vzorkují na plátně v tomto zařízení a nic se neodesílá.

Přetáhněte sem fotku, snímek obrazovky nebo logo

Zde se zobrazí šest dominantních barev vašeho obrázku. Kliknutím na vzorek ho načtete do výběru barvy.

Kontrola kontrastu (WCAG 2.1)

Barva textu

Barva pozadí

Ukázka velkého textu

Příliš žluťoučký kůň úpěl ďábelské ódy. 0123456789

Kontrastní poměr14.67:1

AA · běžný textSplňuje
AAA · běžný textSplňuje
AA · velký textSplňuje
AAA · velký textSplňuje

Velký text znamená alespoň 18 pt (24 px) běžný nebo 14 pt (asi 18,7 px) tučný. AA vyžaduje 4,5:1 pro běžný text a 3:1 pro velký; AAA vyžaduje 7:1 a 4,5:1.

Běžné pojmenované barvy CSS

Dvacet klíčových slov, kterým rozumí každý prohlížeč, s přesnými hodnotami HEX, RGB a HSL.

Název	HEX	RGB	HSL
`black`	#000000	0, 0, 0	0°, 0%, 0%
`white`	#ffffff	255, 255, 255	0°, 0%, 100%
`gray`	#808080	128, 128, 128	0°, 0%, 50%
`silver`	#c0c0c0	192, 192, 192	0°, 0%, 75%
`red`	#ff0000	255, 0, 0	0°, 100%, 50%
`crimson`	#dc143c	220, 20, 60	348°, 83%, 47%
`maroon`	#800000	128, 0, 0	0°, 100%, 25%
`tomato`	#ff6347	255, 99, 71	9°, 100%, 64%
`coral`	#ff7f50	255, 127, 80	16°, 100%, 66%
`orange`	#ffa500	255, 165, 0	39°, 100%, 50%
`gold`	#ffd700	255, 215, 0	51°, 100%, 50%
`yellow`	#ffff00	255, 255, 0	60°, 100%, 50%
`olive`	#808000	128, 128, 0	60°, 100%, 25%
`green`	#008000	0, 128, 0	120°, 100%, 25%
`teal`	#008080	0, 128, 128	180°, 100%, 25%
`aqua`	#00ffff	0, 255, 255	180°, 100%, 50%
`blue`	#0000ff	0, 0, 255	240°, 100%, 50%
`navy`	#000080	0, 0, 128	240°, 100%, 25%
`purple`	#800080	128, 0, 128	300°, 100%, 25%
`rebeccapurple`	#663399	102, 51, 153	270°, 50%, 40%

Co ve skutečnosti popisují HEX, RGB, HSL a HSB

Každá barva na této stránce je v sRGB, výchozím barevném prostoru webu od doby, kdy ho koncem 90. let převzaly prohlížeče. Obrazovka míchá červené, zelené a modré světlo a každý kanál má 256 úrovní (0–255), což dává 16 777 216 možných barev. RGB zapisuje tato tři čísla přímo; HEX zapisuje stejná tři čísla v šestnáctkové soustavě, po dvou číslicích, takže #FF6600 je červená 255, zelená 102, modrá 0. Zkrácený tříciferný zápis každou číslici zdvojí: #F60 je #FF6600.

HSL a HSB (také HSV) popisují tytéž barvy způsobem, který se snáz ručně upravuje. Odstín je úhel na barevném kole: 0° červená, 120° zelená, 240° modrá. Rozdíl je v posledním čísle. V HSL je světlost 100 % vždy bílá a 50 % je nejčistší podoba odstínu; v HSB je jas 100 % čistý odstín a bílá vyžaduje sytost 0 %. Návrhářské aplikace jako Photoshop a Figma používají ve výběru barev HSB, zatímco CSS přímo rozumí hsl(), proto jsou nahoře uvedeny oba zápisy.

Proč je hodnota CMYK jen přibližná

Obrazovky světlo přidávají; tiskárny ho odebírají azurovou, purpurovou, žlutou a černou barvou. Oba systémy pokrývají různé rozsahy barev, tzv. gamuty. Velmi sytých barev obrazovky, například jasně zelené RGB, elektricky modré nebo neonově oranžové, nelze procesními barvami reprodukovat, a tisknou se proto matněji, než vypadají na monitoru.

Hodnoty CMYK zde vycházejí z prostého matematického převodu bez profilu ICC, což se hodí pro hrubé zadání, ale ne pro tiskárnu. Tiskárna převádí s profilem pro svůj papír a stroj, například FOGRA39 v Evropě nebo GRACoL v USA, a stejná barva RGB může mít podle profilu jiné procento barev. Pro tisk pošlete hodnotu RGB nebo HEX spolu s profilem, který tiskárna požaduje.

Jak se počítá kontrastní poměr

WCAG 2.1 porovnává relativní jas dvou barev: světlejší plus 0,05 děleno tmavší plus 0,05. Výsledek se pohybuje od 1:1 (shodné barvy) po 21:1 (černá na bílé). Úroveň AA vyžaduje alespoň 4,5:1 pro běžný text a 3:1 pro velký text, tedy 18 bodů nebo 14 bodů tučně; úroveň AAA zvyšuje požadavky na 7:1 a 4,5:1. Prvky uživatelského rozhraní, například okraje polí a ikony, potřebují 3:1 vůči okolí podle kritéria 1.4.11.

Jas váží zelenou mnohem více než modrou, protože oko je na ni nejcitlivější. Proto žlutý text na bílé selhává výrazně, zatímco tmavě modrý na bílé prochází snadno, i když obě barvy vypadají plně sytě. Loga a čistě dekorativní text jsou z pravidla vyňaty.

Jak získat paletu z fotky nebo loga

Paleta z obrázku načte soubor pomocí canvasu v prohlížeči, zmenší ho na nejvýše 200 pixelů na delší straně a podobné pixely seskupí metodou median-cut, kterou v roce 1982 popsal Paul Heckbert: rozsah barev se opakovaně dělí podél nejširšího kanálu, dokud nezbyde šest skupin, a průměr každé skupiny se stane vzorkem. Průhledné pixely se ignorují, takže logo na průhledném pozadí dá barvy loga.

Když barvy znáte, plošné logo často funguje lépe jako vektor. Převodník obrázků do SVG ho vektorizuje do tvarů se zachováním přesně těchto barev, a pokud navrhujete hlavičku kanálu, změna velikosti banneru YouTube přizpůsobí grafiku rozměru 2560 × 1440 s ohledem na bezpečnou oblast.

Často kladené otázky

Proč je „green“ v CSS tmavší než zelená ve výběru RGB?: Klíčové slovo green je #008000, středně zelená zděděná ze staré 16barevné palety HTML. Plně sytá #00FF00 se jmenuje lime. Celý seznam CSS má podobná překvapení: gray (#808080) je tmavší než darkgray (#A9A9A9).
Nahrává se můj obrázek, když z něj získávám paletu?: Ne. Soubor otevře váš prohlížeč, v paměti ho vykreslí na canvas a tam ho analyzuje. S obrázkem se neodesílá žádný požadavek a zavřením karty se zahodí.
Jaký kontrastní poměr potřebuji pro běžný text?: Alespoň 4,5:1 pro splnění WCAG 2.1 úrovně AA a 7:1 pro úroveň AAA. Nadpisy o velikosti 18 bodů a více nebo 14 bodů tučně mohou pro AA používat 3:1. Mnoho designových systémů cílí všude na 4,5:1, aby byl text čitelný na tlumených displejích i na slunci.
Mohu použít osmimístný kód HEX s průhledností?: Ano, v CSS. Poslední dvě číslice tvoří alfa kanál, takže #2F6FED80 je stejná modrá s průhledností asi 50 %. Tento výběr barev pracuje s plně krycími barvami, proto ukazuje šest číslic; dvojici alfa si v případě potřeby doplňte sami.
Kolik pojmenovaných barev má CSS?: CSS Color Module Level 4 definuje 148 klíčových slov barev, včetně duplicitních pravopisů jako gray a grey. Nejnovější je rebeccapurple (#663399), přidaná v roce 2014 na památku Rebeccy Meyerové, dcery autora CSS Erica Meyera.