Výběr barev

Jak používat výběr barev

1. Klikni na vzorek pod Vyber barvu, otevře se výběr barev tvého prohlížeče, a vyber barvu. Hodnotu můžeš také napsat nebo vložit do pole Kód barvy: kód HEX jako #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) nebo název v CSS, například tomato.
2. Velký náhled se okamžitě aktualizuje a kód HEX je na něm napsán černě nebo bíle, podle toho, co se na daném pozadí čte lépe.
3. V části Kódy barvy zkopíruj potřebný formát tlačítkem Kopírovat vedle něj: HEX, RGB, HSL, HSV nebo CMYK.
4. Klikni na Náhodná barva, když hledáš inspiraci, nebo na Vybrat z obrazovky (v prohlížečích, které to podporují, například Chrome a Edge) a odebereš libovolný pixel na obrazovce, včetně jiných oken.

Všechno probíhá ve tvém prohlížeči: žádná barva ani obrázek se nikam neodesílá.

Co znamená který kód barvy

• HEX je šestimístný šestnáctkový zápis používaný v HTML a CSS. Každá dvojice číslic je jeden kanál (červený, zelený, modrý) od 00 do FF, takže #1E90FF znamená červenou 30, zelenou 144, modrou 255.
• RGB udává stejné tři kanály jako desetinná čísla od 0 do 255. Očekává ho většina designového softwaru a programátorských knihoven.
• HSL popisuje barvu odstínem (úhel od 0° do 360° na barevném kruhu), sytostí a světlostí. Hodí se ke zesvětlení nebo ztmavení barvy změnou jediného čísla.
• HSV (také HSB) používá odstín, sytost a hodnotu (jas). Je to model za barevnými čtverci v Photoshopu, Figmě a mnoha dalších editorech.
• CMYK vyjadřuje barvu v procentech azurové, purpurové, žluté a černé barvy.

O hodnotách CMYK

Kódy CMYK jsou zjednodušený převod: K = 1 − max(R, G, B), pak C = (1 − R − K) / (1 − K) a stejně pro M a Y. Je to standardní učebnicový vzorec, ale nepoužívá profil ICC. Skutečný tisk závisí na stroji, papíru a barvách, takže tiskárna převede tvé barvy vlastním profilem a výsledek se může lišit. Tato čísla ber jako výchozí bod, ne jako záruku pro tisk.

Jak číst poměry kontrastu

Pod kódem HEX ukazuje náhled Kontrast na bílé a Kontrast na černé, vypočtené vzorcem relativní luminance podle WCAG 2. Pro běžný text je na úrovni AA potřeba poměr 4,5:1 nebo vyšší a pro velký text a prvky rozhraní 3:1. Pokud tvá barva dosahuje na bílé jen 3:1, nech ji pro velké nadpisy nebo ikony a pro text použij tmavší odstín.

Tipy

• Kódy HEX můžeš vkládat bez #: funguje i 1e90ff, stejně jako zkrácené zápisy, například f60.
• Hodnoty s průhledností, například rgb(0 0 0 / 50%), se přijímají; výběr barev zobrazí neprůhlednou barvu.
• Vlastní dialog barev v prohlížeči se mezi systémy liší. Když potřebuješ přesnou hodnotu, je psaní do pole Kód barvy vždy přesné.