Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Colore HSLa

Definire il colore di un elemento in HSL e la sua trasparenza con il canale alfa
Definire il colore di un elemento in HSL e la sua trasparenza con il canale alfa
Link copiato negli appunti

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:

Figura 1 - Tabella dei valori della tonalità (click per ingrandire)
screenshot

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%) }

Esempio.

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 Internet Explorer Firefox Safari Google Chrome Opera
HSL 9.0+ 1.0+ 3.1+ 1.0+ 9.5+
HSLa 9.0+ 3.0+ 3.1+ 1.0+ 10.0+

Ti consigliamo anche