In questa lezione vi spiego come viene usato il colore nelle pagine web.

Colori nel web

Nelle pagine web possiamo applicare il colore principalmente a queste categorie di oggetti:

• testi
• sfondi
• linee e bordi

Il colore può essere indicato in vari modi, di seguito trovate i più usati.

Parola chiave

Potete usare una parola chiave che indica il nome del colore in inglese, es:

• black;
• pink;
• lavender.

Codice esadecimale

E’ possibile specificare il colore con una sigla di 3 o 6 caratteri in codice esadecimale, es:

• #77BBEE;
• #7BE;
• #000;

Codice RGB e RGBA

Il codice RGB indica la presenza di rosso, verde e blu nel colore in base ad un valore numerico che va da 0 (assenza di colore) e 255 (totale presenza), es:

• rgb(0,255,0);
• rgb(0,0,0);
• rgb(122,30,0);

Il codice rgba è simile al precedente ma prevede un quarto numero che indica la trasparenza, valore che va da 0.0 (trasparente) e 1.0 (opaco):

• rgb(0,255,0,0.5);

Codice HSL e HSLA

Il codice HSL indica rispettivamente tinta, saturazione e luminosità del colore.

La tinta indica la tonalità di colore e si indica con un valore da 0 a 360 dove:

• 0 e 360 indicano il rosso;
• 120 indica il verde;
• 240 indica il blu.

La saturazione indica la quantità di colore presente e si indica con un valore percentuale che va da 0% (assenza di colore, tinta sul grigio) a 100% (totale presenza di colore).

La luminosità indica la quantità di luce e si indica con un valore percentuale che va da 0% (colore nero) a 100% (colore bianco).

Esempi:

• hsl(100,100%,70%);
• hsl(80,50%,30%);
• hsl(260,100%,50%);

Il codice hsla è simile al precedente ma prevede un quarto numero che indica la trasparenza, valore che va da 0.0 (trasparente) e 1.0 (opaco):

• hsl(100,100%,70%,0.5);

Approfondimenti

Maggiori approfondimenti sul sito Wikipedia.

Video