Impostare il colore tramite rgb in CSS

All'inizio del manuale, quando abbiamo studiato i colori, vi ho detto che il colore può essere impostato o con una parola inglese, o tramite rgb, o tramite #. Questi ultimi due formati permettono di ottenere qualsiasi tonalità di colore. Vediamo come funzionano esattamente questi formati.

Per capire questi metodi, per prima cosa dobbiamo comprendere come viene ottenuto il colore desiderato sullo schermo del computer.

In realtà, un singolo punto dello schermo (pixel) non può emettere tutti i colori di cui abbiamo bisogno, poiché tecnicamente sarebbe molto complesso. Ogni punto dello schermo può emettere luce solo di tre colori: rosso, verde e blu. Ma contemporaneamente e in proporzioni diverse.

Combinando questi colori possiamo ottenere qualsiasi colore di cui abbiamo bisogno, in modo simile a come fanno gli artisti con i colori: mescolando diversi colori ne ottengono uno nuovo.

Per mescolare i colori in CSS è necessario specificare come valore della proprietà la parola chiave rgb, seguita dai valori, separati da virgola, che indicano in quali proporzioni prendere questi tre colori di base. I singoli colori possono variare da 0 a 255. Dove zero - indica l'assenza del colore, mentre 255 indica il colore puro (ad esempio, rosso puro).

Le lettere rgb stanno per red, green, blue.

Vediamo alcuni esempi.

Esempio

Mescoliamo il rosso puro e il blu puro. Per fare ciò, impostiamo il primo valore a 255, il secondo a 0, e il terzo - a 255. Otterremo un colore viola:

<p>
	testo
</p>

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

Esempio

Impostiamo ora il primo valore a 255, e tutti gli altri a zero. Come risultato otterremo il rosso puro:

<p>
	testo
</p>

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

Esempio

In questo modo otterremo il verde puro:

<p>
	testo
</p>

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

Esempio

E se per il verde non si imposta 255, ma 100, si otterrà un verde parziale:

<p>
	testo
</p>

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

Esempio

Mescoliamo tutti e tre i colori in proporzioni arbitrarie. Guardate cosa si è ottenuto:

<p>
	testo
</p>

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

Esempio

Se si impostano tutti i valori a 255, si otterrà il bianco puro:

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

Esempio

Se si impostano tutti i valori a 0, si otterrà il nero puro:

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

Problemi pratici

Impostando il colore tramite rgb, rendete tutti i paragrafi di colore rosso.

Impostando il colore tramite rgb, rendete tutti gli h2 di colore verde.

Impostando il colore tramite rgb, rendete tutti gli h3 di colore blu.

Mescolate il rosso puro e il verde puro. Che colore si ottiene?