I colori sono specificati usando un nome predefinito del colore, o in valori RGB, HEX, HSL, RGBA, HSLA.

Nomi dei colori in CSS

In CSS, un colore può essere specificato usando un nome predefinito del colore:

Per es. Tomato, Orange, DodgerBlue, MediumSeaGreen.

L'HTML e CSS supportano 140 nomi standard di colori.

Colori di sfondo in CSS

Possiamo impostare il colore di background per gli elementi HTML:

Esempio

Colore del testo in CSS

Possiamo impostare il colore del testo:

Esempio

Colore del bordo in CSS

Possiamo impostare il colore dei bordi:

Esempio

Valore dei colori in CSS

In CSS, i colori possono anche essere specificati usando valori RGB, HEX, HSL, RGBA, e HSLA

Stesso colore del nome "Tomato":

• rgb(255, 99, 71)
• #ff6347
• hsl(9, 100%, 64%)

Stesso colore del nome "Tomato", ma al 50% trasparente:

• rgba(255, 99, 71, 0.5)
• hsla(9, 100%, 64%, 0.5)

Esempio

Il valore RGB

In CSS, un colore può essere specificato come un valore RGB usando questa formula:

Ogni paramentro (red, green, e blue) definisce l'intensità del colore entro un valore da 0 a 255.

Per es., rgb(255, 0, 0) viene visualizzato come rosso, perché il rosso è impostato al suo più alto valore (255) e gli altri sono impostati a 0.

Per visualizzare il nero, si impostano tutti i parametri dei colori a 0, così: rgb(0, 0, 0).

Per visualizzare il bianco, si impostano tutti i parametri dei colori a 255, così: rgb(255, 255, 255).

Le scale dei grigi sono spesso definite usando valori uguali per tutti e tre i parametri:

Il valore RGBA

I valori dei colori RGBA sono una estensione dei valori del colore RGB con n canale alfa, che specifica l'opcità per un colore.

Un valore di colore RGBA è specificato con:

Il parametro alpha è un numero tra 0.0 (totalmente trasparente) e 1.0 (non trasparente)

I colori HEX

Il valore HEX

In CSS, un colore può essere specificato usando un valore esadecimale nella forma:

Dove rr (red), gg (green) e bb (blue) sono valori esadecimali tra 00 e ff (come per i decimali 0-255).

Per es. #ff0000 è visualizzato come rosso, perché il rosso è impostato al suo più alto valore (ff) e gli altri sono impostati al valore più basso (00).

Le scale dei grigi sono spesso definite usando valori uguali per tutti e tre i parametri:

Per es. #787878

I colori HSL

Il valore HSL

In CSS, un colore può essere specificato usando hue, saturation e lightness (HSL) tonalità, saturazione e luminosità nella forma:

La tonalità (hue) è un grado sulla ruota dei colori da 0 a 360. 0 è rosso, 120 è verde e 240 è blu.

La saturazione è un valore percentuale, 0% significa una scala di grigio e 100% è il colore pieno.

La luminosità è anche un valore percentuale, 0% è nero, 50% non è né chiaro né scuro, 100% è bianco.

La saturazione

La saturazione può essere descritta come l'intensità di un colore.

100% è il colore puro, senza ombre di grigio.

50% è 50% grigio, ma si può ancora vedere il colore.

0% è totalmente grigio, non si può più vedere il colore.

La luminosità

La luminosità di un colore può essere descritta come quanta luce si voglia dare al colore, dove 0% significa nessuna luce (nero), 50% significa 50% di luce (né scuro né chiaro), 100% significa piena luminosità (bianco).

Le scale di grigio sono spesso definite impostando la tonalità (hue) e la saturazione (saturation) a 0, e regolando la luminosità (lightness) da 0% a 100% per ottenere ombre chiaro scure:

Per es. hsl(0,0, 24%)

Il valore HSLA

I valori di colore HSLA sono una estensione dei valori del colore HSL con un canale alfa, che specifica l'opacità per un colore.

Un valore di colore HSLA è specificato con:

Il parametro alpha è un numero tra 0.0 (totalmente trasparente) e 1.0 (non trasparente)