RGB barvy (nejen pro web)

RGB barvy - o co se jedná a kdy a jak to použijeme?

I když miluju bílou, bez barev přeci jen nedám ani ránu. Ale… žít ve dvou barevných světech vůbec není lehké! O čem mluvím? O realitě a o RGB světě monitorů

Co je RGB?

RGB je zkratkou pro Red Green Blue a označením pro barevný model využívaný k práci s barvami na monitorech a dalších zařízeních. Cokoliv, co vidíme například na obrazovce, je tak vyjadřováno právě prostřednictvím tohoto systému.

Červená, zelená a modrá jsou tzv. primárními barvami. Každá z nich představuje jeden ze tří kanálů, které se sčítají – míchají, a společně vytváří skoro jakoukoliv myslitelnou barvu. Každý barevný tón tak definujeme množstvím červené, zelené a modré, lépe řečeno množstvím světla každého kanálu.

Černá a bílá

V reálném světě jsou barvy otázkou světla, ve světě digitálním – tedy RGB, tomu není jinak. To, co vidíme jako bílou barvu, je vlastně výsledkem smísení maximálního množství všech tří barev, dosahuje se využitím maximálního množství světla. Pokud naopak na žádném z kanálů barvu nepoužijeme, výsledkem bude nulové množství světla a tedy černá.

RGBA

Klasický model RGB má jen tři dimenze – tři barevné (světelné) kanály. Nicméně často využíváme model o čtyřech dimenzích – model RGBA. K předchozím třem kanálům se přidává další informace, tzv. alfa kanál. Alfa kanálem pak řídíme (ne)průsvitnost barvy.

S průsvitností se nejčastěji setkáváme možná v grafických programech. Například pokud pracujeme s vrstvami, můžeme u vrstvy nastavit stupeň krytí – vybraná vrstva tak může být průsvitná. Nebo si u obrázku nastavíme absolutní průhlednost pro bílou, to krásně upotřebíme třeba při přípravě grafiky pro web.

Model RGBA lze taky hezky použít při efektech zesvětlování/ztmavování, typicky třeba u obrázku nastavíme výchozí hodnotu nižší a při najetí myší na něj se hodnota zvedne a tím se obrázek ztmaví.

Vyjádření RGB

Barvy můžeme v tomto modelu definovat různými způsoby, nicméně pro naši tvorbu webu nebo grafiky obvykle využijeme hlavně dva. U obou počítáme s 8 bity pro každou barvu, což znamená 256 možných hodnot pro každý kanál. Dohromady nám to dělá tzv. 24-bitovou hloubku barev (alias True Color) a dává nám to k dispozici neuvěřitelných více než 16,7 milionu odstínů.

V praxi tak určujeme hodnotu pro každý kanál v rozmezí 0 až 255. Zápis pak vypadá jako rgb(255, 255, 255), případně rgba(255, 255, 255, 0.9) zahrnující průsvitnost. Průsvitnost vyjadřujeme číslem na stupnici 0 do 1 včetně, přičemž 1 odpovídá 100% krytí.

Často se setkáváme taky s barvami vyjádřenými šestnáctkovou soustavou. Ta zná hodnoty 0-9, po kterých následuje A-F. Každou ze tří barev definují dvě cifry. 00 tedy znamená nulové množství od dané barvy, FF naopak znamená maximální množství dané barvy. Zápis může vypadat jako #FFFFFF.

Pomůcky pro práci s RGB

Umět pracovat s RGB a být schopný najít si hodnotu pro ten správný odstín nám hodně zpříjemní práci v digitálním světě. Užijeme to minimálně při přípravě grafiky i ladění webových stránek. Umožní nám to pracovat s barvami jednotně a systematicky a nestřílet je od oka.

S hodnotami RGB umí pracovat většina grafických editorů.

Dále spoustu pomůcek pro práci s nimi najdeme na internetu – různé vzorníky, palety, aplikace, kde si vybereme naši oblíbenou barvu nebo doplňkové barvy k ní.

Určitě se taky vyplatí vědět o existenci kapátka. Typicky ho najdeme v nástrojích grafických programů, ale lze ho nainstalovat i jako zvláštní mini aplikaci. Díky němu pak můžeme snadno zjistit hodnotu jakékoliv barvy, která se nám zalíbí.

S RGB zmůžeme hodně!

Nezdá se to možná, ale umět pracovat s barvami prostřednictvím kódů se vyplatí. Umožní nám to třeba velmi jednoduše upravit barvy použité na šabloně webu a tím vzhled rázem proměnit. Ani nemusíme umět kódovat.

 

Užitečné odkazy:

Komentovat

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete použít tyto HTML značky a atributy:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Po odeslání musí být komentář ručně schválen, aby nebyla diskuse plná spamu :). Bude proto chvíli trvat, než se komentář pod příspěvkem zobrazí. Díky!