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.