1. Home
  2. Webařův slovník
  3. Hexadecimální kód: kód barvy pro váš web

Hexadecimální kód: kód barvy pro váš web

Už v několika návodech jsme si říkali, že můžete na mnoha místech vkládat kód barvy. Co to je kód barvy? Kde na něj můžete natrefit?

Možná jste někdy používali nějaký nástroj, který představoval paletu barev. A v něm si velice pohodlně můžete „namíchat“ jakoukoli barvu. Získáte tak kód, který můžete vložit i do svého webu na zombeekovi.

My si ukážeme práci s nástrojem Color Wheel od firmy Adobe:

color.adobe.com/create/color-wheel/

Když na adresu kliknete, tak se objeví takováto stránka.

Možná se leknete velkého kola s pěti ukazateli. Ničeho se nemusíte obávat. Jen vezměte jeden ukazatel a nastavte ho na odstín barvy, který chcete – stačí přibližně. Dejme tomu, že chcete odstín zelené barvy. Tak jeden ukazatel nastavíte do zelené části.

Dole pod kolem se nám tato barva objeví. Nyní přichází ta velké výhoda, že si můžete barvu pomocí posuvníků přizpůsobit – chcete ji ztmavit, zesvětlit nebo má být více do žluta?

Až si barvu nastavíte, tak dole se vygeneruje kód. Kód barvy má nyní podobu 84FF3F. Tento kód můžete vložit do svého webu. Ukážeme si jak.

Ještě než si ukážeme vložení kódu do stránek, tak ještě nahoře máte možnost Explore (objevovat).

Zde najdete schémata barev, která se k sobě hodí. Pokud si tedy vybíráte barvy pro svůj web, tak zde můžete najít inspiraci. Pokud se vám nějaké schéma zalíbí, tak na něj stačí najet a kliknout na Edit Copy.

Tím se vám všechny barvy ze schémata přenesou pod „velké kolo“.

Zde si můžete opět zkopírovat kód každé barvy.

Nyní se podíváme na to, jak kód barvy vložit do vaše webu. Předpokládejme, že chcete změnit barvu tlačítka. U tlačítka kliknete na ikonu ozubeného kolečka.


Zobrazí se v levém sloupci možnost Barva pozadí. Kde můžete vložit kód barvy.

Zkopírovaný kód barvy vložíte a hned se označí správná barva.

Vidíte, že barva odpovídá barvě na obrázku pod „velkým kolem“.

Námi vybraná barva se nyní nastavila jako barva políčka.

Updated on Březen 23, 2019

Was this article helpful?

Related Articles

Leave a Comment