Določanje barve z rgb v CSS

Že na začetku učbenika, ko smo preučevali barve, sem vam povedal, da lahko barvo določite z angleško besedo, z rgb ali z #. Zadnji dve obliki omogočata pridobitev barve katerega koli odtenka. Poglejmo, kako natančno delujeta ti formati.

Da bi razumeli ti načina, moramo najprej razumeti, kako dobimo želeno barvo na zaslonu računalnika.

Pravzaprav posamezna točka zaslona (piksel) ne more svetiti z vsemi barvami, ki so potrebne, saj bi bilo to tehnično zelo zapleteno. Vsaka točka zaslona lahko sveti le s tremi barvami: rdečo, zeleno in modro. Vendar pa hkrati in v različnih razmerjih.

S kombiniranjem teh barv lahko dobimo katero koli potrebno barvo, podobno kot to počnejo slikarji z barvami: z mešanjem več barv dobijo še eno novo.

Za mešanje barv v CSS morate kot vrednost lastnosti navesti ključno besedo rgb, za katero navedete z vejicami ločene vrednosti, ki določajo, v kakšnem razmerju naj se vzamejo te tri osnovne barve. Same barve se lahko spreminjajo od 0 do 255. Pri čemer je ničla - odsotnost barve, 255 pa je čista barva (na primer, čisto rdeča).

Same črke rgb pomenijo red, green, blue.

Poglejmo si primere.

Primer

Pomešajmo čisto rdečo in čisto modro barvo. Za to postavimo prvo vrednost na 255, drugo na 0, tretjo pa - na 255. Dobili bomo vijolično barvo:

<p>
	besedilo
</p>

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

Primer

Postavimo zdaj prvo vrednost na 255, vse ostale pa - na nič. Kot rezultat bomo dobili čisto rdečo barvo:

<p>
	besedilo
</p>

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

Primer

Tako bomo dobili čisto zeleno barvo:

<p>
	besedilo
</p>

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

Primer

Če za zeleno postavimo ne 255, ampak 100, bo rezultat delno zelena:

<p>
	besedilo
</p>

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

Primer

Pomešajmo vse tri barve v poljubnih razmerjih. Poglejte, kaj se je zgodilo:

<p>
	besedilo
</p>

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

Primer

Če postavimo vse vrednosti na 255, bomo dobili čisto belo barvo:

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

Primer

Če postavimo vse vrednosti na 0, bomo dobili črno barvo:

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

Praktične naloge

Z določitvijo barve prek rgb naredite vse odstavke rdeče barve.

Z določitvijo barve prek rgb naredite vse h2 zelene barve.

Z določitvijo barve prek rgb naredite vse h3 modre barve.

Pomešajte čisto rdečo in čisto zeleno. Katera barva se bo pojavila?