Nastavenie farby pomocou rgb v CSS

Na úplnom začiatku učebníka, keď sme študovali farby, som vám povedal, že farbu je možné nastaviť buď anglickým slovom, alebo pomocou rgb, alebo pomocou #. Posledné dva formáty umožňujú získať farbu akéhokoľvek odtieňa. Poďme si rozobrať, ako presne tieto formáty fungujú.

Aby sme pochopili tieto spôsoby, musíme najprv pochopiť, ako sa získava požadovaná farba na obrazovke počítača.

V skutočnosti jednotlivý bod obrazovky (pixel) nemôže svietiť všetkými farbami, ktoré sú potrebné, pretože by to bolo technicky veľmi zložité. Každý bod obrazovky môže svietiť len tromi farbami: červenou, zelenou a modrou. Ale súčasne a v rôznych pomeroch.

Kombinovaním týchto farieb môžeme získať akúkoľvek potrebnú farbu, podobne ako to robia maliari s farbami: miešaním niekoľkých farbieb získavajú ďalšiu novú.

Na zmiešanie farieb v CSS je potrebné ako hodnotu vlastnosti uviesť kľúčové slovo rgb, za ktorým sú uvedené cez čiarku hodnoty určujúce, v akých pomeroch treba brať tieto tri základné farby. Samotné farby sa môžu meniť od 0 do 255. Pričom nula - to je neprítomnosť farby a 255 - to je čistá farba (napríklad, čistá červená).

Samotné písmená rgb sa rozšifrujú ako red, green, blue.

Pozrime sa na príklady.

Príklad

Poďme zmiešať čistú červenú a čistú modrú farbu. Na to nastavíme prvú hodnotu na 255, druhú na 0 a tretiu - na 255. Dostaneme fialovú farbu:

<p>
	text
</p>

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

Príklad

Poďme teraz nastaviť prvú hodnotu na 255 a všetky ostatné - na nuly. Výsledkom bude čistá červená farba:

<p>
	text
</p>

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

Príklad

Takto dostaneme čistú zelenú farbu:

<p>
	text
</p>

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

Príklad

A ak pre zelenú nastavíme nie 255, ale 100, tak dostaneme čiastočne zelenú:

<p>
	text
</p>

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

Príklad

Zmiešajme všetky tri farby v ľubovoľných pomeroch. Pozrite sa, čo sa stalo:

<p>
	text
</p>

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

Príklad

Ak nastavíme všetky hodnoty na 255, dostaneme čistú bielu farbu:

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

Príklad

Ak nastavíme všetky hodnoty na 0, tak dostaneme čistú čiernu farbu:

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

Praktické úlohy

Nastavením farby pomocou rgb urobte všetky odseky červenej farby.

Nastavením farby pomocou rgb urobte všetky h2 zelenej farby.

Nastavením farby pomocou rgb urobte všetky h3 modrej farby.

Zmiešajte čistú červenú a čistú zelenú. Akú farbu dostanete?