14 agosto, 2010
CSS3 permette di utilizzare, oltre a valori di colore RGB ed esadecimali, anche valori HSL (Hue, Saturation, Lightness).
I tre valori da specificare sono:
- Hue: rappresenta il grado della scala di colore: 0 (0 360) rapprsenta il rosso, 120 il verde, 240 il blu. Valori intermedi indicano le diverse tonalità di questi tre colori.
- Saturation: è un valore espresso in percentuale: 100%; è il colore pieno.
- Lightness: è anch’esso un valore percentuale: 0% rappresenta il valore più scuro (nero), 100% il più chiaro (bianco) e 50% il valore medio.
HSL fornisce, quindi, un ampio spettro di colori e sfumature disponibili.
Attualmente questa proprietà è supportata da Opera 9.5, Safari 3, Google Chrome e Firefox.
Ecco un esempio:
Ed il CSS utilizzato nel primo caso è:
background-color: hsl(0,100%, 50%);
background-color: hsl(120,100%, 50%);
background-color: hsl(240,100%, 50%);
background-color: hsl(120,100%, 50%);
background-color: hsl(240,100%, 50%);
Mentre nel secondo caso lo stesso risultato è ottenuto con valori RGB:
background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);
