Zjištění barev

Ke zjištění barev můžete využít doplněk webového prohlížeče nazvaný ColorZilla. Ten umí (mimo jiné) z webové stránky získat tzv. hexadecimální kód barvy, kterým se ve zdrojovém kódu webové stránky definuje barva. Hexadecimální kód barvy lze využít také pro kontrolu kontrastu ve validátoru kontrastu.

1. Ve webovém prohlížeči Chrome nebo Firefox zadejte adresu https://www.colorzilla.com/.
   
   
2. Z nabídky zvolte ColorZilla for Chrome and Firefox. Další nabídka se přizpůsobí vašemu prohlížeči; některé detaily se proto mohou lišit.
   
   
3. Klikněte na tlačítko Install ColorZilla (většinou je u tlačítka uvedena také verze rozšíření).
   
   
4. Klikněte na tlačítko Přidat do Chromu, resp. Přidat do Firefoxu.
   
   
5. Dokončete instalaci doplňku (včetně udělení potřebných oprávnění).
   
   
6. Po instalaci se v pravém horním rohu prohlížeče vedle adresního řádku objeví doplněk ColorZilla ve formě ikony se symbolem kapátka, viz obr. 1.
   
   Obr. 1: Zástupce rozšíření ColorZilla v prohlížeči (zdroj: archiv autorky)

1. Klikněte na ikonu nástroje ColorZilla (na kapátko). Tím aktivujete nástroj pro výběr barev. Pod ikonou kapátka by se po kliknutí na ikonu měl zobrazit text Page Color Picker Active. V případě, že se tento text po kliknutí na ikonu nezobrazí, v otevřené nabídce klikněte na položku Color Picker (viz obr. 2).
   
   Obr. 2: Aktivace nástroje Color Picker (zdroj: archiv autorky)
   
   
2. Kurzor se změní v křížek a v horní části prohlížeče pod adresním řádkem se vysune černá lišta. Čtvereček na liště zobrazuje barvu oblasti stránky, na které se právě nachází kurzor (viz obr. 3)¹⁾.
   
   
   Obr. 3: Výběr barvy z webové stránky (zdroj: archiv autorky)
   
   
3. Vyberte požadovanou oblast stránky a klikněte na ni myší. Vybraná barva se vloží do paměti (historie) nástroje ColorZilla.
   
   

   Pokud potřebujete zjistit barvu písma a písmo je příliš malé, takže je problém umístit na ně kurzor, můžete si zobrazení stránky zvětšit pomocí kombinace kláves ctrl a +.

4. Kliknutím na ikonu nástroje ColorZilla otevřete nabídku a vyberte z ní položku Color Picker. Zobrazí se nástroj pro úpravu barev.
   
   
5. Z historie uložených barev (Color History) napravo vyberte kliknutím čtvereček s požadovanou barvou a dole zkopírujte hodnotu hexadecimálního kódu barvy (viz obr. 4). Tento kód pak můžete zadat do validátoru kontrastu nebo do kódu webové stránky.
   
   Obr. 4: Historie vybraných barev (zdroj: archiv autorky)
   

Využít lze také nástroj pro hromadnou analýzu barev v definici webové stránky, tzv. Webpage Color Analyzer.

1. Klikněte na ikonu nástroje ColorZilla (na kapátko).
   
   
2. Z rozbalovací nabídky zvolte položku Webpage Color Analyzer. V horní části stránky se zobrazí okno s přehledem použitých barev (viz obr. 5).²⁾
   
   
   Obr. 5: Zobrazení barev pomocí volby Webpage Color Analyzer (zdroj: Knihovny.cz, získáno 2020-08-25)
   
   
3. Pokud na některou z barev kliknete myší, zobrazí se informace o dané barvě a stylech na stránce, ve kterých je použita (viz obr. 6).
   
   
   Obr. 6: Zobrazení informací o vybrané barvě pomocí nástroje Webpage Color Analyzer (zdroj: archiv autorky)