Nastavení barvy pomocí rgb v CSS

Na samém začátku učebnice, když jsme studovali barvy, řekl jsem vám, že barvu lze zadat buď anglickým slovem, nebo pomocí rgb, nebo pomocí #. Poslední dva formáty umožňují získat barvu libovolného odstínu. Pojďme se podívat, jak přesně tyto formáty fungují.

Abychom těmto způsobům porozuměli, musíme nejprve pochopit, jak se získává požadovaná barva na obrazovce počítače.

Ve skutečnosti jednotlivý bod obrazovky (pixel) nemůže svítit všemi barvami, které jsou potřeba, protože by to bylo technicky velmi složité. Každý bod obrazovky může svítit pouze třemi barvami: červenou, zelenou a modrou. Ale současně a v různých poměrech.

Kombinací těchto barev můžeme získat jakoukoli požadovanou barvu, podobně jako to dělají výtvarníci s barvami: mícháním několika barev získávají další novou.

Pro míchání barev v CSS je třeba jako hodnotu vlastnosti uvést klíčové slovo rgb, za kterým jsou čárkou odděleny hodnoty udávající, v jakých poměrech je třeba brát tyto tři základní barvy. Samotné barvy se mohou měnit od 0 do 255. Nula - to je absence barvy, a 255 - to je čistá barva (například čistě červená).

Samotná písmena rgb znamenají red, green, blue.

Podívejme se na příklady.

Příklad

Smícháme čistě červenou a čistě modrou barvu. K tomu nastavíme první hodnotu na 255, druhou na 0 a třetí - na 255. Získáme fialovou barvu:

<p>
	text
</p>

p {
	color: rgb(255, 0, 255);
}

Příklad

Nyní nastavme první hodnotu na 255 a všechny ostatní - na nuly. Výsledkem bude čistě červená barva:

<p>
	text
</p>

p {
	color: rgb(255, 0, 0);
}

Příklad

Tímto způsobem získáme čistě zelenou barvu:

<p>
	text
</p>

p {
	color: rgb(0, 255, 0);
}

Příklad

A pokud pro zelenou nastavíme ne 255, ale 100, získáme částečně zelenou:

<p>
	text
</p>

p {
	color: rgb(0, 100, 0);
}

Příklad

Smícháme všechny tři barvy v libovolných poměrech. Podívejte se, co vzniklo:

<p>
	text
</p>

p {
	color: rgb(200, 100, 125);
}

Příklad

Pokud nastavíme všechny hodnoty na 255, získáme čistou bílou barvu:

p {
	color: rgb(255, 255, 255);
}

Příklad

Pokud nastavíme všechny hodnoty na 0, získáme čistou černou barvu:

p {
	color: rgb(0, 0, 0);
}

Praktické úlohy

Nastavením barvy pomocí rgb udělejte všechny odstavce červené barvy.

Nastavením barvy pomocí rgb udělejte všechny h2 zelené barvy.

Nastavením barvy pomocí rgb udělejte všechny h3 modré barvy.

Smíchejte čistou červenou a čistou zelenou. Jaká barva vznikne?