Szín megadása rgb-vel CSS-ben

A tankönyv legelején, amikor a színeket tanulmányoztuk, elmondtam, hogy a színt vagy angol szóval, vagy rgb-n keresztül, vagy #-n keresztül adhatjuk meg. Ez utóbbi két formátum bármilyen árnyalatú színt előállítani képes. Nézzük meg, pontosan hogyan működnek ezek a formátumok.

Ahhoz, hogy megértsük ezeket a módszereket, először is meg kell értenünk, hogyan jön létre a kívánt szín a számítógép képernyőjén.

Valójában a képernyő egyetlen pontja (pixel) nem tudja világítani az összes szükséges színt, mivel ez technikailag nagyon bonyolult lenne. A képernyő minden pontja csak három színben világíthat: pirosban, zöldben és kékben. De egyszerre és különböző arányokban.

E színek kombinálásával bármilyen kívánt színt megkaphatunk, hasonlóan ahhoz, ahogyan a festők teszik ezt a festékkel: több szín összekeverésével kapnak egy újabbat.

A színek keveréséhez CSS-ben a tulajdonság értékeként meg kell adni a rgb kulcsszót, majd utána vesszővel elválasztva felsorolni azt, hogy milyen arányban kell felvenni ezt a három alapszínt. Maguk a színek változhatnak 0-tól 255-ig. Ráadásul a nulla - ez a szín hiánya, a 255 pedig a tiszta szín (például tiszta piros).

Maga a rgb betűszó a következőt jelenti: red (piros), green (zöld), blue (kék).

Nézzünk példákat.

Példa

Keverjük össze a tiszta piros és tiszta kék színt. Ehhez az első értéket állítsuk 255-re, a másodikat 0-ra, a harmadikat pedig 255-re. Lila színt kapunk:

<p>
	szöveg
</p>

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

Példa

Állítsuk most az első értéket 255-re, az összes többit pedig nullára. Az eredmény tiszta piros szín lesz:

<p>
	szöveg
</p>

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

Példa

Így kapunk tiszta zöld színt:

<p>
	szöveg
</p>

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

Példa

Ha a zöldre nem 255-öt állítunk, hanem 100-at, akkor részben zöld szín jön létre:

<p>
	szöveg
</p>

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

Példa

Keverjük össze mindhárom színt tetszőleges arányban. Nézd, mi jött ki:

<p>
	szöveg
</p>

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

Példa

Ha minden értéket 255-re állítunk, akkor tiszta fehér színt kapunk:

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

Példa

Ha minden értéket 0-ra állítunk, akkor tiszta fekete színt kapunk:

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

Gyakorlati feladatok

A szín rgb-s megadásával állítsd be az összes bekezdést piros színűre.

A szín rgb-s megadásával állítsd be az összes h2 elemét zöld színűre.

A szín rgb-s megadásával állítsd be az összes h3 elemét kék színűre.

Keverd össze a tiszta piros és tiszta zöld színt. Milyen szín jön létre?