Definirea culorilor prin rgb în CSS

La începutul acestui ghid, când am studiat culorile, v-am spus că o culoare poate fi definită fie printr-un cuvânt englezesc, fie prin rgb, fie prin #. Ultimele două formate permit obținerea oricărei nuanțe de culoare. Să vedem cum funcționează exact aceste formate.

Pentru a înțelege aceste metode, trebuie mai întâi să înțelegem cum se obține o culoare dorită pe ecranul computerului.

De fapt, un punct individual al ecranului (pixel) nu poate străluci în toate culorile de care avem nevoie, deoarece acest lucru ar fi foarte complicat din punct de vedere tehnic. Fiecare punct al ecranului poate străluci doar în trei culori: roșu, verde și albastru. Dar simultan și în proporții diferite.

Combinând aceste culori putem obține orice culoare de care avem nevoie, similar cu modul în care pictorii fac cu vopselele: amestecând mai multe culori, ei obțin o altă culoare nouă.

Pentru a amesteca culorile în CSS, trebuie să pecificați cuvântul-cheie rgb ca valoare a proprietății, după care enumerați prin virgulă proporțiile în care trebuie luate aceste trei culori de bază. Culorile în sine pot varia de la 0 la 255. În plus, zero - înseamnă absența culorii, iar 255 înseamnă culoarea pură (de exemplu, roșu pur).

Literele rgb în sine sunt prescurtarea de la red, green, blue.

Să ne uităm la câteva exemple.

Exemplu

Să amestecăm roșu pur și albastru pur. Pentru a face acest lucru, setăm prima valoare la 255, a doua la 0, iar a treia - la 255. Vom obține culoarea violet:

<p>
	text
</p>

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

Exemplu

Acum să setăm prima valoare la 255, iar toate celelalte - la zero. Ca rezultat, vom obține culoarea roșie pură:

<p>
	text
</p>

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

Exemplu

În acest fel obținem culoarea verde pură:

<p>
	text
</p>

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

Exemplu

Iar dacă pentru verde setăm nu 255, ci 100, vom obține verde parțial:

<p>
	text
</p>

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

Exemplu

Să amestecăm toate cele trei culori în proporții arbitrare. Uitați-vă ce a rezultat:

<p>
	text
</p>

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

Exemplu

Dacă setați toate valorile la 255, veți obține culoarea albă pură:

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

Exemplu

Dacă setați toate valorile la 0, veți obține culoarea neagră pură:

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

Sarcini practice

Definind culoarea prin rgb, faceți toate paragrafele de culoare roșie.

Definind culoarea prin rgb, faceți toate h2-urile de culoare verde.

Definind culoarea prin rgb, faceți toate h3-urile de culoare albastră.

Amestecați roșu pur și verde pur. Ce culoare se va obține?