HSL

È l'acronimo di "Hue, Saturation, Lightness."

HSL è un modello di colore che definisce i colori come insiemi di tre attributi, in modo simile al modello di colore RGB. Inizia specificando un punto sulla ruota dei colori, quindi regola la saturazione e la luminosità per creare il colore finale. I grafici e i web designer lo usano spesso perché offre un modo più semplice per apportare piccole modifiche ai colori senza dover usare un selettore di colori.

Invece di rappresentare un colore come una combinazione di altri colori, come nel modello di colore RGB, HSL usa i tre attributi tonalità, saturazione e luminosità per definire un colore:

• Tonalità rappresenta la posizione angolare sulla ruota dei colori come un numero compreso tra 0 e 359º. Il rosso puro si trova nella parte superiore della ruota, rappresentato da un valore angolare di 0º; il ciano si trova all'estremità opposta, a 180º.
• Saturazione rappresenta l'intensità del colore come percentuale compresa tra 0 e 100%. Una saturazione dello 0% produce il grigio.
• Luminosità rappresenta la luminosità del colore come percentuale compresa tra 0 e 100%. Una luminosità dello 0% corrisponde al nero, una luminosità del 50% corrisponde al colore stesso e una luminosità del 100% corrisponde al bianco.

Il modello di colore HSL può produrre la stessa gamma di colori di RGB, ma con una formattazione diversa. Ad esempio, un colore ciano chiaro con valori RGB R:166, G:242, B:242 o un valore (esadecimale #A6F2F2) è uguale a uno con una tonalità di 180º, una saturazione del 75% e una luminosità dell'80%. I file di immagini digitali salvano comunque le informazioni sui colori come valori RGB, anche quando un editor di immagini usa HSL.

HSL è considerato un metodo più intuitivo per definire i colori come insieme di numeri. I web designer specificano spesso i colori in CSS usando HSL invece di RGB per semplificare le piccole modifiche. Ad esempio, se un web designer ha specificato un colore usando il codice CSS hsl(180, 75%, 80%), può renderlo più scuro riducendo il valore della luminosità. Se tentasse di apportare la stessa modifica usando i valori RGB, dovrebbe cambiare tutti e tre i valori di quantità diverse.

NOTE: Il modello di colore HSL è simile al modello HSB. Sebbene HSB usi lo stesso calcolo per la tonalità, usa la luminosità invece della luminosità relativa: un valore di 100 rappresenta il colore pieno anziché il bianco, e questo influisce anche sul calcolo della saturazione.