Un'altra novità dei CSS3 riguarda la possibilità di definire i colori attraverso una notazione HSL: Tonalità (Hue), Saturazione (Saturation), Luminosità (Lightness).
Sono concetti certamente noti a chi lavora nell'ambito della grafica. Il W3C giustifica l'introduzione di questo metodo, complementare rispetto a RGBa, in quanto ritenuto più intuitivo.
Per capire meglio come funziona HSL è opportuno spendere qualche parola sui valori della tripletta HSL.
Con 'H' (Hue), lo accennavamo, si definisce la tonalità. Il valore numerico è rappresentato dall'angolo (espresso in gradi) di un cerchio di colori che al grado 0/360 presenta il rosso, e che nelle altre posizioni, a intervalli di 30°, presenta le altre tonalità. Nella specifica si può trovare questa tabella riassuntiva utile per farsi un'idea più precisa:
Dal momento che i gradi sono la misura standard per gli angoli, non è necessario esprimerli come unità di misura, basta il valore numerico. In pratica, nel nostro CSS, per definire una tonalità rossa useremo 0, per il giallo 60, per il verde 120, e così via.
Definita la tonalità di base (H), si può intervenire per correggerla sui valori di saturazione (S) e luminosità (L). In entrambi i casi si usa una scala che va dallo 0% al 100%. Si tenga presente che impostando la luminosità al 100% si ottiene sempre il bianco, allo 0% sempre il nero, a prescindere dalla tonalità.
Dunque, se vogliamo rappresentare il rosso (il colore che corrisponde alla parola chiave red, per intenderci), scriveremo:
body {background-color: hsl(0, 100%, 50%) }Impostare la trasparenza
Accanto alla notazione HSL, e analogamente a quanto visto per RGB, la specifica CSS3 consente di definire la trasparenza del colore attraverso il canale alfa. Abbia così, insieme a RGBa, HSLa.
Per la trasparenza alfa valgono le stesse regole viste nella lezione precedente: la scala da usare va da 0.0 a 1.0 (che è il valore di default).
Riprendendo uno degli esempi visti per RGBa, possiamo ottenere lo stesso risultato in questo modo:
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
background-color: hsla(0,100%,100%,0.5);
}Tabella del supporto sui browser
| Colore |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| HSL | 9.0+ | 1.0+ | 3.1+ | 1.0+ | 9.5+ |
| HSLa | 9.0+ | 3.0+ | 3.1+ | 1.0+ | 10.0+ |