CSS3 Base – 4.1 – Il colore nei CSS

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *