Představte si, že procházíte obrázky a najdete dokonalou barvu – přesný odstín, který potřebujete pro svůj další designový projekt. Na internetu existuje několik úžasných nástrojů, které vám pomohou identifikovat konkrétní barvy v jakékoli aplikaci nebo webu. Pojďme se podívat na některé z jejich nejlepších možností.
1. Používání nástrojů pro vývojáře ve webovém prohlížeči Chrome
Jednou z možností, kterou můžete vyzkoušet, je nástroj Chrome Developer. Chrome přichází s mnoha užitečnými funkcemi pro vývojáře, díky nimž je provádění úkolů mnohem snazší. Pomocí následujících kroků můžete určit konkrétní barvy v jakékoli aplikaci nebo webu.
- Otevřete webovou stránku, na které chcete určit barvu, ve webovém prohlížeči Chrome
- Klikněte na ikonu se třemi tečkami v pravém horním rohu prohlížeče Chrome. Objeví se vyskakovací okno se spoustou možností.
- Klikněte na „Další nástroje“ a poté z výsledného vyskakovacího okna vyberte „Nástroje pro vývojáře“.
- Pokud chcete výše uvedené kroky přeskočit, použijte Ctrl + Shift + I
- Nyní se okno rozdělí na dvě obrazovky – web nalevo a kód webu napravo
- Na klávesnici zadejte Ctrl + Shift + C. Když najedeme kurzorem myši na prvky, zobrazí se vám všechny podrobnosti o konkrétním prvku na webu.
- Barevný kód prvku najdete spolu s dalšími užitečnými informacemi.
Příklad
Řekněme, že vás zajímají konkrétní barevné kódy pro některé prvky na následujícím webu:
Nástroje pro vývojáře si můžete vybrat kliknutím na tři tečky v rohu obrazovky. V rozevírací nabídce vyberte Další nástroje a poté Nástroje pro vývojáře.
Obrazovka bude vizuálně rozdělena na dvě stránky. Vlevo uvidíte web a vpravo kód webu.
Zadejte příkaz a zkratku „Ctrl + Shift + C“ a najeďte kurzorem myši na prvky webu. Zobrazí se barva tohoto prvku spolu s dalšími užitečnými informacemi. Níže jsou uvedeny dva příklady, kde najdeme barvu navigační lišty a řídicího panelu pod vyhledávacím nástrojem.
Zde najdeme kód barvy ve vyskakovacím okně pro navigační lištu. Kód barvy je #333333.
Barvu palubní desky najdete spolu s dalšími užitečnými detaily. Barva: #333333, Barva pozadí: #5D4A8E. I když to na začátku může vypadat trochu děsivě, s trochou cviku se používání programu stává mnohem snazším.
2. Rozšíření oční kapátko Chrome
Eye Dropper je oblíbené a široce používané rozšíření pro Chrome, které vám pomůže najít určité barvy na libovolném webu nebo v aplikaci.
Chcete-li identifikovat konkrétní barvy na webu nebo v aplikaci pomocí nástroje rozšíření Eye Dropper, postupujte podle následujících kroků.
- Otevřete libovolnou webovou stránku nebo aplikaci ve webovém prohlížeči Chrome
- Klikněte na ikonu rozšíření Eye Dropper
- Vyberte „Vybrat barvu z webové stránky“ a umístěte kurzor myši na různé prvky v aplikaci nebo na webu.
Barevný kód prvků naleznete v pravém dolním rohu webové stránky.
Příklad
Dobře, pojďme použít nástroj pro rozšíření kapátka v reálném příkladu. Začneme otevřením webové stránky a kliknutím na ikonu rozšíření Eye Dropper
Když najedete kurzorem na různé prvky webové stránky, uvidíte barevné kódy zobrazené v sekci v pravém dolním rohu obrazovky.
Když najedu kurzorem na ikonu ve tvaru V, vidím její barevný kód ve spodním okně, jak bylo zmíněno. Výhodou tohoto nástroje je, že můžete najít také RGB kód spolu s hexadecimálním kódem barvy prvku. Metoda je flexibilní pro použití pro ty, kteří chtějí jednoduchý a rychlý způsob, jak získat kódy pro své oblíbené barvy.