Tonalità, saturazione e luminosità

In HSL, giallo e blu hanno entrambi una luminosità del 50%, eppure il giallo riflette quasi 13 volte più luce del blu secondo la formula di luminanza WCAG.

Trasformare il cubo in un cilindro

I numeri RGB sono facili per uno schermo e difficili per una persona. Se vuoi «lo stesso blu, un po' più chiaro», devi cambiare tutti e tre i canali insieme di quantità diverse. HSL riorganizza gli stessi colori sRGB in modo che i comandi corrispondano a come le persone parlano del colore. CSS Color 4 lo descrive come un modello cilindrico: un angolo di tonalità attorno all'esterno, un asse centrale per la luminosità dal nero al bianco e un raggio per la saturazione, cioè quanto un colore è lontano da un grigio neutro.

Immagina il cubo RGB in piedi sul suo angolo nero con il bianco dritto sopra. L'asse dei grigi ora è verticale. Guarda dall'alto e i sei angoli vivaci, rosso, giallo, verde, ciano, blu e magenta, formano un anello attorno all'asse. HSL prende quell'anello, lo rende rotondo e stira tutto il solido in un cilindro. Il modello qui sopra mostra il risultato: un disco orizzontale alla luminosità scelta e una fetta verticale alla tonalità scelta e alla sua opposta. Clicca in un punto qualsiasi di una delle due superfici per scegliere quel colore.

Tonalità

La tonalità è un angolo in gradi. CSS Color 4 fissa il punto di partenza: 0deg è il rosso sRGB, 120deg è il verde e 240deg è il blu, e 360deg torna al rosso. A metà strada tra i primari ci sono i secondari: 60deg giallo, 180deg ciano e 300deg magenta. Poiché la tonalità è un angolo, si avvolge su se stessa. Una tonalità di 390deg è uguale a 30deg, e aggiungere 180deg a una tonalità qualsiasi porta al colore direttamente di fronte sul cerchio.

Saturazione e luminosità

La saturazione è una percentuale. Al 100% il colore sta all'esterno del cilindro ed è vivace quanto sRGB consente a quella luminosità. Allo 0% sta sull'asse centrale ed è un grigio; CSS Color 4 dice che allora la tonalità non ha alcun effetto, quindi hsl(0deg 0% 50%) e hsl(180deg 0% 50%) sono lo stesso grigio. Anche la luminosità è una percentuale. 0% è nero per ogni tonalità, 100% è bianco per ogni tonalità, e 50% dà la versione più vivace di una tonalità. Quindi hsl(0deg 100% 50%) è lo stesso rosso di #ff0000, mentre hsl(120deg 100% 25%) è un verde scuro, rgb(0 128 0).

Dove HSL inganna

HSL è comodo, e la specifica CSS è franca sui suoi limiti. La sua luminosità non è la luminosità che vede il tuo occhio. Il giallo, hsl(60deg 100% 50%), e il blu, hsl(240deg 100% 50%), hanno la stessa L del 50%, ma il giallo sembra molto più chiaro. La formula di luminanza WCAG dà 0.9278 per quel giallo e 0.0722 per quel blu, un rapporto di quasi 13. Nemmeno l'angolo della tonalità è uniforme: la specifica nota che un passo di 30 gradi tra i blu sembra piccolo, mentre lo stesso passo tra giallo e verde sembra grande. Spazi CSS più recenti come oklch() sono stati progettati per correggere questo. Per controllare se un testo si può leggere, non fidarti mai della luminosità HSL. Usa il rapporto di contrasto, che calcolerai nell'unità 6.