Objevte nástroj pro výběr barev v Google Chrome
Prohlížeč Google Chrome standardně obsahuje sadu nástrojů pro webové vývojáře známou jako Chrome DevTools. Mezi rozsáhlou škálou dostupných funkcí vyniká zejména nástroj pro výběr barev.
Jak se k němu ale dostanete? Jak ho používat a jaké vlastnosti tento nástroj nabízí?
V tomto článku se podíváme na tento nástroj a prozkoumáme jeho funkčnost.
Spuštění nástroje Chrome Color Picker
K nástroji pro výběr barev v prohlížeči Chrome se dostanete pomocí klávesové zkratky nebo přes grafické uživatelské rozhraní (GUI).
Použijte klávesovou zkratku Ctrl + Shift + I (Command + Option + I na Macu) pro otevření DevTools a následně přejděte k nástroji pro výběr barev.
Alternativně, kliknutím pravým tlačítkem myši na stránku a zvolením „Zkontrolovat“ (Inspect) se dostanete do DevTools.
DevTools lze také nastavit tak, aby se otevíraly automaticky s každou novou kartou, což umožňuje rychlý přístup k nástroji pro výběr barvy. Pro toto je nutné spustit Chrome z příkazového řádku s parametrem:
--auto-open-devtools-for-tabs
Příklad spuštění Chrome s automaticky otevíraným DevTools v Linuxu:
google-chrome-stable --auto-open-devtools-for-tabs
Používání nástroje Color Picker v prohlížeči Chrome
Po otevření DevTools je potřeba se orientovat na sekci, která slouží k identifikaci barev na webové stránce či designu.
Ve výchozím nastavení by měla být aktivní sekce „Styly“ (Style) v dolní části DevTools. Pokud vidíte něco jiného, ujistěte se, že máte vybránu sekci „Styly“ pro přístup k CSS kódu stránky.
Nyní je třeba v CSS kódu vyhledat barevná pole označená jako „background“ nebo „color“. Zde najdete požadovaný nástroj pro výběr barev.
Stačí kliknout na barevné pole a zobrazí se rozšířené možnosti, jak je vidět na obrázku níže.
A je to! Nástroj pro výběr barvy je připraven k použití přímo ve vašem prohlížeči.
Zobrazí se hexadecimální kód nebo RGB hodnota barvy a získáte možnost prozkoumávat další prvky CSS a kontrolovat design webové stránky.
Funkce nástroje Color Picker v Chrome
Nástroj pro výběr barvy v Chromu poskytuje kromě hexadecimálního kódu i řadu dalších informací.
Klíčové funkce zahrnují:
Barevné palety: Místo procházení mnoha odstínů barev získáte několik předdefinovaných barevných palet pro rychlou volbu.
Formáty barev: Možnost přepínat mezi hexadecimálním kódem, hodnotami RGBA a HSLA.
Kapátko: Umožňuje vybrat libovolný prvek na webové stránce a získat hexadecimální kód jeho barvy. Přepínač pro aktivaci a deaktivaci kapátka je snadno dostupný.
Dále získáte i další možnosti pro vyladění barvy:
- Kopírování do schránky: Možnost rychle zkopírovat kód barvy do schránky.
- Barevný gradient: Možnost upravit odstín a prozkoumat kombinace barev.
- Ovládání krytí: Nastavení průhlednosti barvy.
- Výběr barvy pozadí: Možnost vybrat vhodnou barvu pozadí pro dokonalý kontrast.
- Kontrastní poměr: Úprava kontrastu pro lepší viditelnost textu/prvku.
Poznámka: Nástroj pro výběr barvy není exkluzivní pouze pro Google Chrome, ale je dostupný i v jiných prohlížečích postavených na Chromiu, jako je například Brave.
Nástroj Color Picker v Chrome a Prezentace Google
K nástroji pro výběr barev se dostanete kliknutím pravým tlačítkem myši na záhlaví webové stránky Prezentací Google. I když Prezentace nemají vlastní nástroj pro výběr barev, toto řešení je postačující.
Pokud vám nevyhovuje používání DevTools v Prezentacích Google, můžete vyzkoušet rozšíření pro Chrome.
Rozšíření Chrome jako alternativa
Je nutné mít na paměti, že rozšíření nemusí být vždy aktuální a je potřeba být obezřetný, protože vyžadují přístup k datům vašeho prohlížeče. To platí i pro zde zmíněná rozšíření.
Dvě oblíbená rozšíření, která by vás mohla zajímat, jsou:
#1. ColorZilla
ColorZilla nabízí stejné základní funkce jako nástroj pro výběr barvy v Chromu. Navíc umožňuje prohlížení historie naposledy vybraných barev.
Toto rozšíření najde uplatnění ve všech případech použití, nejen v Prezentacích Google.
#2. Kapátko ColorPick
Pokud máte problémy s kapátkem v DevTools, můžete zkusit Kapátko ColorPick, které nabízí funkci kapátka bez potřeby otevírat DevTools.
Po vybrání barvy se zobrazí hodnota RGB a možnost generování barevných palet. Stejně jako v předchozím případě, i zde je možnost zkontrolovat historii vybraných barev.
Závěrem 🎨
Chrome DevTools Color Picker je užitečný nástroj, který pro identifikaci barev a souvisejícího kódu nepotřebuje žádné profesionální řešení. Nástroj v Chromu to usnadňuje bez nutnosti instalace externích rozšíření.
Od grafických designérů po webové vývojáře, každý ho může využít. I když jsou k dispozici rozšíření třetích stran, doporučuje se prozkoumat všechny funkce, které nabízí DevTools.