Prečo je „green“ v CSS tmavšia ako zelená vo výbere RGB?

Kľúčové slovo green je #008000, stredne zelená zdedená zo starej 16-farebnej palety HTML. Plne sýta #00FF00 sa volá lime. Celý zoznam CSS má podobné prekvapenia: gray (#808080) je tmavšia než darkgray (#A9A9A9).

Nahráva sa môj obrázok, keď z neho získavam paletu?

Nie. Súbor otvorí váš prehliadač, vykreslí ho v pamäti na canvas a tam ho analyzuje. S obrázkom sa neodosiela žiadna požiadavka a zatvorením karty sa zahodí.

Aký kontrastný pomer potrebujem pre bežný text?

Aspoň 4,5:1 pre splnenie úrovne AA podľa WCAG 2.1 a 7:1 pre úroveň AAA. Nadpisy s veľkosťou 18 bodov alebo väčšie, prípadne 14 bodov tučným písmom, môžu pre AA používať 3:1. Mnohé dizajnové systémy mierijú všade na 4,5:1, aby text zostal čitateľný na tlmených obrazovkách aj na slnku.

Môžem použiť 8-miestny kód HEX s priehľadnosťou?

Áno, v CSS. Posledné dve číslice sú alfa kanál, takže #2F6FED80 je tá istá modrá s približne 50 % nepriehľadnosťou. Tento výber pracuje s nepriehľadnými farbami, preto zobrazuje šesť číslic; dvojicu alfa si doplňte sami, keď ju potrebujete.

Koľko pomenovaných farieb má CSS?

CSS Color Module Level 4 definuje 148 farebných kľúčových slov vrátane duplicitných pravopisov, ako gray a grey. Najnovšie je rebeccapurple (#663399), pridané v roku 2014 na pamiatku Rebeccy Meyerovej, dcéry autora CSS Erica Meyera.

Výber farby

Vyberte ľubovoľnú farbu a získajte jej kód vo všetkých bežných formátoch pripravený na skopírovanie. Vytvorte zladené palety, zistite dominantné farby fotky bez jej nahrávania a overte, či dvojica textu a pozadia spĺňa kontrast podľa WCAG.

Vybraná farba#2F6FED

VybraťHEX

Odtieň220°Sýtosť84%Svetlosť56%

Kódy farby vo všetkých formátoch

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

Palety z tejto farby

Komplementárna

Analogická

Triadická

Svetlejšie odtiene (zmiešané s bielou)

Tmavšie odtiene (zmiešané s čiernou)

Paleta z obrázka

Váš obrázok číta váš prehliadač a nikdy sa nenahráva: pixely sa vzorkujú na plátne v tomto zariadení a nič sa nikam neodosiela.

Sem presuňte fotku, snímku obrazovky alebo logo

Tu sa zobrazí šesť dominantných farieb vášho obrázka. Kliknutím na vzorku ju načítate do výberu farby.

Kontrola kontrastu (WCAG 2.1)

Farba textu

Farba pozadia

Ukážka veľkého textu

Kŕdeľ ďatľov učí koňa žrať kôru. 0123456789

Kontrastný pomer14.67:1

AA · bežný textVyhovuje
AAA · bežný textVyhovuje
AA · veľký textVyhovuje
AAA · veľký textVyhovuje

Veľký text znamená aspoň 18 pt (24 px) bežný alebo 14 pt (asi 18,7 px) tučný. AA vyžaduje 4,5:1 pre bežný text a 3:1 pre veľký; AAA vyžaduje 7:1 a 4,5:1.

Bežné pomenované farby CSS

Dvadsať kľúčových slov, ktorým rozumie každý prehliadač, s presnými hodnotami HEX, RGB a HSL.

Názov	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%

Čo v skutočnosti opisujú HEX, RGB, HSL a HSB

Každá farba na tejto stránke je v priestore sRGB, predvolenom farebnom priestore webu od čias, keď ho koncom 90. rokov prijali prehliadače. Obrazovka mieša červené, zelené a modré svetlo a každý kanál má 256 úrovní (0–255), čo dáva 16 777 216 možných farieb. RGB zapisuje tieto tri čísla priamo; HEX zapisuje tie isté tri čísla v šestnástkovej sústave, po dvoch číslicach, takže #FF6600 je červená 255, zelená 102, modrá 0. Trojciferná skratka zdvojuje každú číslicu: #F60 je #FF6600.

HSL a HSB (nazývané aj HSV) opisujú tie isté farby spôsobom, ktorý sa ľahšie upravuje ručne. Odtieň je uhol na farebnom kolese: 0° červená, 120° zelená, 240° modrá. Rozdiel je v poslednom čísle. V HSL je svetlosť 100 % vždy biela a 50 % je najčistejšia podoba odtieňa; v HSB je jas 100 % čistý odtieň a biela vyžaduje sýtosť 0 %. Dizajnérske aplikácie ako Photoshop a Figma používajú vo svojich výberoch HSB, zatiaľ čo CSS natívne rozumie hsl(), preto sú uvedené oba.

Prečo je hodnota CMYK len približná

Obrazovky svetlo pridávajú; tlačiarne ho odoberajú azúrovou, purpurovou, žltou a čiernou farbou. Oba systémy pokrývajú rôzne rozsahy farieb, nazývané gamuty. Veľmi sýte farby obrazovky, napríklad jasná zelená RGB, elektrická modrá alebo neónová oranžová, ležia mimo toho, čo dokážu reprodukovať procesné farby, a preto sa vytlačia matnejšie, než vyzerajú na monitore.

Hodnoty CMYK tu používajú čistý matematický prepočet bez profilu ICC, čo je užitočné na hrubé zadanie, ale nie pre tlač. Tlačiareň prevádza podľa profilu pre svoj papier a stroj, napríklad FOGRA39 v Európe alebo GRACoL v Spojených štátoch, a tá istá farba RGB môže mať v každom z nich iné percentá farieb. Pri tlačových prácach pošlite hodnotu RGB alebo HEX spolu s profilom, ktorý vaša tlačiareň požaduje.

Ako sa počíta kontrastný pomer

WCAG 2.1 porovnáva relatívnu luminanciu dvoch farieb: svetlejšia plus 0,05 delená tmavšou plus 0,05. Výsledok sa pohybuje od 1:1 (rovnaké farby) po 21:1 (čierna na bielej). Úroveň AA vyžaduje aspoň 4,5:1 pre bežný text a 3:1 pre veľký text, teda 18 bodov alebo 14 bodov tučným písmom; úroveň AAA to zvyšuje na 7:1 a 4,5:1. Prvky používateľského rozhrania, ako sú okraje polí a ikony, potrebujú 3:1 voči okoliu podľa kritéria úspešnosti 1.4.11.

Luminancia váži zelenú oveľa viac než modrú, pretože oko je na ňu najcitlivejšie. Preto žltý text na bielom zlyháva výrazne, zatiaľ čo tmavomodrý na bielom prejde s veľkou rezervou, hoci obe farby vyzerajú plne sýte. Loga a čisto dekoratívny text sú z pravidla vyňaté.

Ako získať paletu z fotky alebo loga

Paleta z obrázka načíta váš súbor cez canvas prehliadača, zmenší ho na najviac 200 pixelov na dlhšej strane a zoskupí podobné pixely metódou median-cut, ktorú opísal Paul Heckbert v roku 1982: farebný rozsah sa opakovane delí pozdĺž najširšieho kanála, kým nezostane šesť skupín, a priemer každej skupiny sa stane vzorkou. Priehľadné pixely sa ignorujú, takže logo na priehľadnom pozadí dá farby loga.

Keď už farby máte, jednoduché logo často funguje lepšie ako vektor. Konvertor obrázka na SVG ho vektorizuje na tvary, ktoré zachovajú presne tieto farby, a ak navrhujete hlavičku kanála, zmena veľkosti bannera na YouTube prispôsobí grafiku rozmeru 2560 × 1440 s ohľadom na bezpečnú oblasť.

Často kladené otázky

Prečo je „green“ v CSS tmavšia ako zelená vo výbere RGB?: Kľúčové slovo green je #008000, stredne zelená zdedená zo starej 16-farebnej palety HTML. Plne sýta #00FF00 sa volá lime. Celý zoznam CSS má podobné prekvapenia: gray (#808080) je tmavšia než darkgray (#A9A9A9).
Nahráva sa môj obrázok, keď z neho získavam paletu?: Nie. Súbor otvorí váš prehliadač, vykreslí ho v pamäti na canvas a tam ho analyzuje. S obrázkom sa neodosiela žiadna požiadavka a zatvorením karty sa zahodí.
Aký kontrastný pomer potrebujem pre bežný text?: Aspoň 4,5:1 pre splnenie úrovne AA podľa WCAG 2.1 a 7:1 pre úroveň AAA. Nadpisy s veľkosťou 18 bodov alebo väčšie, prípadne 14 bodov tučným písmom, môžu pre AA používať 3:1. Mnohé dizajnové systémy mierijú všade na 4,5:1, aby text zostal čitateľný na tlmených obrazovkách aj na slnku.
Môžem použiť 8-miestny kód HEX s priehľadnosťou?: Áno, v CSS. Posledné dve číslice sú alfa kanál, takže #2F6FED80 je tá istá modrá s približne 50 % nepriehľadnosťou. Tento výber pracuje s nepriehľadnými farbami, preto zobrazuje šesť číslic; dvojicu alfa si doplňte sami, keď ju potrebujete.
Koľko pomenovaných farieb má CSS?: CSS Color Module Level 4 definuje 148 farebných kľúčových slov vrátane duplicitných pravopisov, ako gray a grey. Najnovšie je rebeccapurple (#663399), pridané v roku 2014 na pamiatku Rebeccy Meyerovej, dcéry autora CSS Erica Meyera.