Tonalità, saturazione e luminosità (HSB) spiegate semplici

Tonalità, saturazione e luminosità (HSB) sono un modo per descrivere qualsiasi colore con tre semplici manopole. La tonalità è quale colore è, espressa come angolo da 0 a 360 gradi attorno alla ruota dei colori. La saturazione è la sua intensità, dal grigio allo 0 per cento al colore pieno al 100 per cento. La luminosità è quanta luce ha, dal nero allo 0 per cento alla versione più luminosa di quel colore al 100 per cento. Quando vedi i colori così, ritoccare una palette smette di essere un tirare a indovinare.

Tonalità: quale colore

La tonalità è la posizione sulla ruota dei colori. Sulle ruote a schermo il rosso sta a 0 gradi, il verde a 120 e il blu a 240, con giallo, ciano e magenta in mezzo. Poiché la tonalità è un angolo, le armonie di colore diventano semplice aritmetica: aggiungi 180 gradi per un complementare, 120 per una triade.

Saturazione: quanto forte

La saturazione controlla quanta tonalità è presente. Abbassala e un colore si svuota verso il grigio; alzala e il colore diventa vivido. Le palette più raffinate stanno ben sotto la saturazione piena. I colori totalmente saturi gridano, il che va bene per un adesivo di saldi e stanca in un intero sito. Le palette di colori attenuati sono per lo più una storia di saturazione più bassa.

Luminosità: quanta luce

In HSB la luminosità è quanto il colore è illuminato. Allo 0 per cento ogni colore è nero, qualunque siano tonalità e saturazione. Al 100 per cento ottieni la versione più luminosa che lo schermo può mostrare per quella tonalità e saturazione. Per fare un pastello pallido in HSB tieni alta la luminosità e abbassi la saturazione, il che mescola del bianco. È proprio l’idea dietro tinte, toni e ombre.

HSB e HSL: la differenza che inganna tutti

HSL sembra quasi identico: tonalità, saturazione, chiarezza. La tonalità è la stessa. Cambia la terza manopola. In HSL una chiarezza del 50 per cento è il colore puro, lo 0 per cento è nero e il 100 per cento è sempre bianco. In HSB una luminosità del 100 per cento è il colore puro quando la saturazione è piena, e si arriva al bianco solo abbassando anche la saturazione. Anche i valori di saturazione differiscono tra i due, quindi lo stesso colore ha valori diversi in ciascuno.

Usare HSL in CSS

Il CSS capisce direttamente hsl(), il che lo rende comodo per i temi. Tieni la tonalità in una variabile e puoi spostare il colore di un’intera interfaccia con un solo numero. Esiste anche hwb() (tonalità, bianchezza, nerezza), più vicino nello spirito a HSB. I dettagli sono nella pagina di MDN su hsl(), e i colori HSL va più a fondo.

:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */

Perché la stessa chiarezza non sembra uguale

HSB e HSL sono geometria, non percezione. Giallo puro e blu puro stanno entrambi a una chiarezza HSL del 50 per cento, eppure il giallo sembra molto più luminoso: secondo la formula WCAG la sua luminanza relativa è circa 0,93 contro 0,07 del blu. Metti testo bianco su ciascuno e la differenza è evidente. È per questo che una palette costruita variando uniformemente la chiarezza HSL può sembrare irregolare, e perché il contrasto del testo va sempre verificato, non dato per scontato.

I modelli percettivi risolvono il problema. OKLCH mantiene l’idea familiare di chiarezza, croma e tonalità, ma la sua chiarezza segue ciò che vede l’occhio, quindi i passaggi sembrano uniformi. Per ritocchi rapidi HSB e HSL vanno benissimo; per una scala di brand o un gradiente che evita i centri fangosi, usa OKLCH.

Modi rapidi per regolare un colore con HSB

• Troppo forte: abbassa la saturazione da 15 a 25 punti prima di toccare altro.
• Troppo spento: alza un po’ la saturazione, oppure sposta la tonalità di qualche grado verso il caldo.
• Serve uno stato hover: abbassa la luminosità di circa 10 punti.
• Serve una tinta di sfondo: tieni la tonalità, abbassa molto la saturazione e porta la luminosità vicino a 100.
• Due colori stonano: avvicina una tonalità all’altra, oppure attenua uno dei due.

Se preferisci partire da uno stile finito invece che da tre cursori, il Mercato di Gradiently ti permette di cercare i Mark con parole di colore come «verde acqua profondo» o «pesca calda».