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:

html<p>
  testo
</p>

cssp {
  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:

html<p>
  testo
</p>

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

Результат:

Esempio

In questo modo otterremo il verde puro:

html<p>
  testo
</p>

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

Результат:

Esempio

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

html<p>
  testo
</p>

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

Результат:

Esempio

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

html<p>
  testo
</p>

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

Результат:

Esempio

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

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

Esempio

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

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

Problemi pratici