Výber farieb

Ako používať výber farieb

1. Klikni na vzorku pod Vyber farbu, otvorí sa výber farieb tvojho prehliadača, a vyber farbu. Hodnotu môžeš aj zadať alebo vložiť do poľa Kód farby: kód HEX ako #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) alebo názov v CSS ako tomato.
2. Veľký Náhľad sa okamžite aktualizuje, pričom kód HEX je napísaný čiernou alebo bielou, podľa toho, čo je na danom pozadí čitateľnejšie.
3. V časti Kódy farby skopíruj potrebný formát tlačidlom Kopírovať vedľa neho: HEX, RGB, HSL, HSV alebo CMYK.
4. Klikni na Náhodná farba, keď chceš inšpiráciu, alebo na Vybrať z obrazovky (v prehliadačoch, ktoré to podporujú, napríklad Chrome a Edge) a odober vzorku ľubovoľného pixelu na obrazovke vrátane iných okien.

Všetko prebieha v tvojom prehliadači: žiadna farba ani obrázok sa nikam neodosiela.

Čo znamená každý kód farby

• HEX je šesťmiestny šestnástkový zápis používaný v HTML a CSS. Každá dvojica číslic je jeden kanál (červený, zelený, modrý) od 00 po FF, takže #1E90FF znamená červená 30, zelená 144, modrá 255.
• RGB udáva tie isté tri kanály ako desiatkové čísla od 0 do 255. Očakáva ho väčšina dizajnérskeho softvéru a programátorských knižníc.
• HSL opisuje farbu odtieňom (uhol od 0° do 360° na farebnom kolese), sýtosťou a svetlosťou. Hodí sa na zosvetlenie či stmavenie farby zmenou jediného čísla.
• HSV (nazývané aj HSB) používa odtieň, sýtosť a hodnotu (jas). Je to model za farebnými štvorcami vo Photoshope, Figme a mnohých ďalších editoroch.
• CMYK vyjadruje farbu ako percentá azúrovej, purpurovej, žltej a čiernej farby.

O hodnotách CMYK

Kódy CMYK sú naivný prevod: K = 1 − max(R, G, B), potom C = (1 − R − K) / (1 − K) a rovnako pre M a Y. Je to štandardný učebnicový vzorec, no nepoužíva profil ICC. Skutočná tlač závisí od stroja, papiera a farieb, takže tlačiareň prevedie tvoje farby vlastným profilom a výsledok sa môže líšiť. Tieto čísla ber ako východisko, nie ako dôkaz pre tlač.

Ako čítať pomery kontrastu

Pod kódom HEX zobrazuje náhľad Kontrast na bielej a Kontrast na čiernej, vypočítané vzorcom relatívneho jasu podľa WCAG 2. Pomer 4,5:1 alebo viac je potrebný pre bežný text na úrovni AA a 3:1 pre veľký text a prvky rozhrania. Ak tvoja farba dosiahne na bielej len 3:1, nechaj ju pre veľké nadpisy alebo ikony a pre text použi tmavší odtieň.

Tipy

• Kódy HEX môžeš vkladať bez #: funguje aj 1e90ff, rovnako ako skrátené tvary ako f60.
• Hodnoty s priehľadnosťou, napríklad rgb(0 0 0 / 50%), sa prijímajú; výber farieb zobrazí nepriehľadnú farbu.
• Vlastný dialóg farieb prehliadača sa medzi systémami líši. Ak potrebuješ presnú hodnotu, zadanie do poľa Kód farby je vždy presné.