Colore HSL: il modo più amichevole di scrivere i colori in CSS

Un colore HSL si scrive con tre numeri: tonalità, saturazione e luminosità. In CSS, hsl(262 83% 58%) indica una tonalità di 262 gradi (viola), saturazione 83% (vivace) e luminosità 58% (un po’ sopra il punto medio). È lo stesso viola di #7c3bed, ma questa volta puoi leggerlo. Lo vuoi più chiaro? Alza l’ultimo numero. Più morbido? Abbassa quello centrale. Questa proprietà, un solo significato per numero, è il motivo per cui l’HSL è il modo più amichevole di scrivere i colori a mano.

Cosa significano tonalità, saturazione e luminosità

La tonalità è una posizione sul cerchio cromatico, espressa in gradi. Il rosso sta a 0 e di nuovo a 360, il giallo a 60, il verde a 120, il ciano a 180, il blu a 240 e il magenta a 300. Muovere la tonalità fa ruotare il colore mantenendone l’intensità.

La saturazione è quanta quantità di colore c’è. A 0% ogni tonalità è lo stesso grigio; a 100% è vivace quanto lo schermo permette. La luminosità va dal nero a 0% al bianco a 100%, con la tinta pura al 50%. Il modello è trattato più ampiamente in tonalità, saturazione e luminosità, che spiega anche come l’HSB delle app di design differisca dall’HSL del CSS.

La sintassi HSL in CSS

Ci sono due modi di scriverlo. Quello moderno separa i valori con spazi e mette l’alfa dopo una barra. Quello più vecchio usa le virgole e una funzione hsla() a parte. I browser accettano entrambi, e hsl() ora accetta anche l’alfa, quindi hsla() non serve più. Il riferimento MDN per hsl() elenca ogni forma.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Costruisci una scala di colori cambiando la luminosità

Qui l’HSL si guadagna il posto. Tieni fisse tonalità e saturazione, fai variare la luminosità a gradini, e ottieni una famiglia di tinte e sfumature che chiaramente stanno insieme. Ecco un viola in sette passi, con l’HEX in cui si converte ciascuno.

Abbinalo alle proprietà personalizzate CSS e l’intero tema dipende da due numeri. Salva una volta tonalità e saturazione, poi scegli una luminosità per ogni ruolo. Cambia la variabile della tonalità e tutta l’interfaccia passa dal viola al verde acqua, ed è l’idea alla base delle variabili CSS per i temi.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Colori relativi

I browser più recenti supportano anche la sintassi dei colori relativi, che legge le componenti HSL di qualsiasi colore e ti permette di regolarle. hsl(from var(--brand) h s calc(l + 15%)) dà una versione più chiara qualunque sia il colore del brand, anche se era definito in HEX. Controlla il supporto attuale su caniuse prima di affidartici, e tieni un’alternativa semplice. Per mescolare due colori invece di ritoccarne uno, lo strumento è color-mix() in CSS.

Dove l’HSL ti inganna

L’HSL è una riorganizzazione dell’RGB, non un modello della visione umana. La sua luminosità è una semplice media tra il canale più luminoso e quello più debole, quindi ignora il fatto che i nostri occhi vedono giallo e verde come molto più brillanti del blu. Il risultato: due colori con identica luminosità HSL possono sembrare completamente diversi in brillantezza.

Conta in due casi. Primo, una scala costruita variando la luminosità HSL risulterà irregolare tra le tonalità: un giallo al 50% è troppo chiaro per il testo mentre un blu al 50% lo supera facilmente. Prova sempre coppie reali con un verificatore di contrasto. Secondo, i gradienti e le palette generate che ruotano la tonalità a luminosità fissa si illuminano e si attenuano passando per il giallo e il blu.

OKLCH mantiene la stessa idea amichevole (luminosità, colorazione, tonalità) ma misura la luminosità come la misurano gli occhi. Se parti con un nuovo design system, è l’impostazione migliore; se modifichi del CSS esistente o vuoi un ritocco rapido e leggibile, l’HSL resta perfettamente valido.

Convertire HSL in HEX e viceversa

Raramente serve fare i calcoli, perché ogni strumento di design e ogni pannello devtools del browser converte per te: clicca un campione di colore nei devtools di Chrome o Firefox e scorri tra i formati. Sotto il cofano, l’HSL si converte prima in RGB, e da RGB a HEX è una semplice aritmetica sulle coppie, spiegata in da HEX a RGB. Aspettati piccole differenze di arrotondamento: hsl(262 83% 58%) finisce su #7c3bed, a un passo dal #7c3aed da cui magari eri partito, perché le percentuali intere non raggiungono tutti i 16,7 milioni di valori HEX.

Se progetti in Gradiently, questi numeri non li tocchi quasi mai: un Mark porta la sua palette, e con Pro il brand kit memorizza i tuoi colori così il Designer li applica al posto tuo.