Co je hexadecimální kód? Vše, co potřebujete vědět

Práce s barvami v HTML je poměrně jednoduchá. Pomocí několika jednoduchých deklarací CSS můžete změnit barvu jakéhokoli textu nebo pozadí na své webové stránce. Ale jak určíte barvu? Odpověď na tuto otázku nás zavede do králičí nory, která nás nakonec přivede ke konceptu hexadecimálních barevných kódů.

Pokud jste dříve pracovali s HTML nebo CSS, pravděpodobně jste slyšeli termín hex kód. Ale co přesně je hexadecimální kód? Jaké jsou příklady hexadecimálních kódů? Jaký je rozdíl mezi hexadecimálním kódem a barevným kódem RGB?

Co je hexadecimální kód?

Když poprvé začnete pracovat s barvou, můžete použít grafické rozhraní k výběru barev, které se použijí na prvky na vaší stránce. Když se začnete dívat na základní kód spíše než jen na svůj grafický editor, zjistíte, že barvy vypadají jako podivně vypadající sekvence znaků. Takové sekvence jsou známé jako hexadecimální kódy; vypadají nějak takto:

#FF0092

Příbuzný: Základní pojmy grafického designu, které potřebujete znát

V CSS můžete určit barvy několika různými způsoby. Můžete použít názvy některých předdefinovaných barev jako např

Červené a temně purpurová. Chcete-li však určit přesné odstíny barev, budete muset použít přesnější měření: něco číselného.

CSS nabízí dvě hlavní možnosti: RGB a hex. V obou formátech určíte množství červené, zelené a modré, které tvoří konečnou barvu. RGB používá tři čísla mezi 0 a 255. Hex dělá úplně to samé, akorát s jiným základem (16), než je desetinné číslo (10), na které jste zvyklí.

Hex používá písmena A-F, kromě číslic 0-9, pro celkem 16 symbolů. A v šestnáctkové soustavě je ekvivalentem 10 v desítkové soustavě. F v šestnáctkové soustavě je 15 v desítkové soustavě.

Jak fungují hexadecimální barevné kódy?

Ve své nejzákladnější podobě je hexadecimální kód reprezentace toho, kolik červené, zelené a modré existuje v barvě. Hexadecimální kód se skládá ze šesti znaků. První dvě se týkají množství červené ve směsi, další dvě se týkají množství zelené a poslední dvě číslice odrážejí množství modré. Hexadecimální kódy odkazují na konkrétní barvy a umožňují návrhářům a vývojářům snadno komunikovat o barevných schématech.

S hodnotami 16 × 16 (256) pro každou barevnou složku je pak 256 × 256 × 256 možných kombinací. V hexu se pohybují od #000000 (čistě černá) do #FFFFFF (čistě bílá).

Jak číst hexadecimální barevné kódy

Pochopení hexadecimálních barevných kódů je snadné. Vezměme si příklad #FF5733. Nejprve rozdělte šest znaků na tři části, z nichž každá obsahuje dva znaky. Jak víte, první dvě části představují červenou, druhé dvě části zelenou a třetí dvě části modrou. Takže v našem příkladu:

• Červená složka, RR, má hodnotu FF.
• Zelená složka, GG, je 57.
• Modrá složka, BB, je 33.

Nyní, abyste zjistili intenzitu těchto barevných segmentů, musíte pomocí těchto tří kroků vypočítat hexadecimální číslo:

1. Vynásobte první hexadecimální znak RR 16. Pokud je znakem písmeno, převeďte jej na odpovídající hodnotu. V tomto případě je prvním znakem F, což je 15. Takže pro náš příklad násobíte 15 × 16, což se rovná 240.
2. Dále přidejte druhý znak RR. Znovu převeďte písmeno na odpovídající hodnotu, pokud to bude potřeba. V našem příkladu je druhým znakem F, které se rovná 15.
3. Po dokončení sečtením součtů získáte jednu hodnotu. Pokud přidáte 240 a 15 z našeho příkladu, uvidíte, že hodnota FF je 255.

Opakujte stejný vzorec pro zbývající dva segmenty, GG označený 57 a BB označený 33. Pokud se vám ruční výpočty zdají příliš ohromující, můžete vždy použít nástroj pro převod hex do RGB (např BinaryHex převodník) přečíst barvu. Měli byste zjistit, že hexadecimální hodnota #FF5733 je ekvivalentní rgb (255, 87, 51).

Proč je hexadecimální barevný kód tak oblíbený?

I když existuje několik různých barevných modelů (RGB, CMYK, HSL), hex kódy barev jsou možná nejrozšířenějším zobrazením. Je to proto, že jsou jednoduché a snadno pochopitelné.

Velmi užitečný je také formát s pevnou šířkou. Šestnáctkové barvy plné délky jsou vždy sedm znaků, včetně prokladu # symbol.

Hexadecimální barvy jsou velmi účinné, pouze těchto sedm znaků představuje více než 16 milionů barev. A rozlišování mezi těmito barvami je přímočarý proces.

Hex vs. RGB: Existuje nějaký rozdíl?

RGB systém barevného kódování používá tři desetinná čísla k označení relativní intenzity červené, zelené a modré. Používá číslice 0-9.

Hex také používá tři čísla k reprezentaci červené, zelené a modré, ale pro základ 16 používá další číslice (A-F). Ve výsledných barvách není žádný rozdíl, jsou to prostě různé formáty pro sdělování stejných informací.

Příbuzný: Základy CSS: Práce s barvami

K čemu se používá hexadecimální kód?

RGB využívá celá řada různých aplikací, od televizních obrazovek po mobilní zařízení, hry a nápisy. Hexadecimální barevné kódy uvidíte hlavně ve webdesignu a dalších grafických programech.

Můžete také vidět hexadecimální kódy jako univerzální způsob identifikace barev. Mnoho webových stránek je používá k identifikaci konkrétní barvy, protože jsou krátké a obvykle v kontextu jednoznačné.

Hexadecimální barevný kód není žádná raketová věda

Takže zde máte základy hexadecimálních barevných kódů. Nejsou to zrovna tvrdá věda, ale v designu (a v technologickém světě) slouží určitému účelu. Pokud hledáte nástroj, který vám pomůže porozumět tomu, jak fungují hexadecimální barvy, nebo nástroj, který vás naučí teorii míchání RGB, existuje spousta online. Pamatujte, že klíčem k tomu, abyste se naučili cokoli nového, je dělat to krok za krokem.

Hexadecimální barevné kódy nejsou tou nejzajímavější věcí na světě, ale pokud pracujete v oblasti webdesignu, je důležité jim porozumět. Schopnost pracovat s hexadecimálními barevnými kódy vám výrazně usnadní návrhářskou práci.

Jak najít hexadecimální hodnotu libovolné barvy na obrazovce

Naučte se, jak vybrat libovolnou hodnotu barvy z obrazovky během několika sekund. Zvláště užitečné pro webové designéry!

Přečtěte si další

O autorovi