I Colori in CSS

Go to the profile of  Jacopo Kahl
Jacopo Kahl
3 min di lettura
I Colori in CSS

In questo post parleremo di come vengono gestiti e implementati i colori all'interno dei fogli di stile.

Notazione con nome

In CSS i colori possono essere definiti semplicemente scrivendo il loro nome in inglese:

p { color: red; } /* il colore del paragrafo è blu*/

Ci sono 140 colori specificati dal proprio nome. Questi colori sono supportati da tutti i browser.

Per avere una tabella di tutti i nomi clicca qui.

Notazione Esadecimale

Per avere una palette completa di colori possiamo impostare individualmente i valori per il rosso, il verde e il blu.

Ogni componente di colore è composta da due cifre esadecimali, e tutta la serie di sei cifre che compone il colore è preceduta dal simbolo del cancelletto #RRGGBB.

L'esadecimale indica il conteggio in base 16, quindi le cifre valide sono da 0 a 9 e da A ad F. Ogni coppia rosso-verde-blu può variare da 00 a FF o da 0 a 255 in notazione decimale. Tutto questo fornisce un set composto da 16 milioni di colori da scegliere.

p { color: #FF0000; } /* Rosso: 255, Verde: 0 e Blu:0 */

Di seguito trovate un tool che vi permetterà di sperimentare nella scelta dei colori.

Esempio 1

Colore:

Eesempio 2

Esadecimale:

Notazione Esadecimale abbreviata

Esiste anche una notazione esadecimale abbreviata, dove possiamo specificare un colore utilizzando solo 3 cifre esadecimali anziché 6. Questa notazione può essere convertita in una esadecimale normale semplicemente duplicando le cifre.

p { color: #F00; } /* uguale a #FF0000 */

La notazione esadecimale abbreviata è utile quando non serve per forza la forma estesa.

Notazione RGB

La funzione rgb() consente di specificare un valore di colore come tre intensità di
valori per le componenti di colore rosso, verde e blu. Il valore può essere un numero intero compreso tra 0 e 255 o una percentuale.

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

Questa notazione consente la stessa precisione nella specifica del colore esattamente come per quella esadecimale. Quale notazione tra le due? Dipende da una questione di preferenza; ma la notazione esadecimale è spesso preferita perché è più corta e più facile da passare come valore  a programmi di grafica (come ad esempio Photoshop).

Notazione RGBA

Con CSS3 si è introdotta la notazione RGBA, che aggiunge il valore alpha che specifica la trasparenza del colore. Il valore alpha è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (totalmente opaco).

/* Colore verde con trasparenza al 60% */
p { color: rgba(0%, 100%, 0%, 0.6); }

I browser che ancora non supportano la notazione RGBA, ignorano la dichiarazione per il valore alpha, applicando un'opacità 1.0 di default.

Notazione HSL

Un valore di colore può essere impostato con la funzione hsl() (che sta per tonalità,
saturazione e leggerezza). La tonalità è un grado su un cerchio colorato da 0 a
360, dove 0 e 360 ​​sono rossi, 120 è verde e 240 è blu.

La saturazione è un valore percentuale, con 0% che dà una sfumatura di grigio e 100% che dà il colore pieno. La luminosità è specificata come percentuale, dallo 0% (scuro) a 100% (luminoso).

p { color: hsl(0, 100%, 100%); }

Notazione HSLA

Così come è possibile farlo per la funzione RGB, anche con HSL possiamo estendere i valori del colore aggiungendo il canale alpha per la trasparenza.

/* Rosso con 70% di trasparenza */
p { color: hsla(0, 100%, 100%, 0.7); }

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Cos'è il box model
3 min di lettura
I Gradienti in CSS
5 min di lettura
Gestire lo sfondo in CSS
4 min di lettura
Gestire i font con i CSS
3 min di lettura
Proprietà del testo in CSS
4 min di lettura