RGB descrive un colore come lo produce uno schermo, ma non come lo pensa una persona. Nessuno dice «vorrei un po' più di verde e un po' meno di rosso»; diciamo «più chiaro», «meno acceso», «più verso l'arancio». Per avvicinare i numeri al linguaggio umano sono nati modelli che separano tonalità, saturazione e luminosità. Alcuni sono semplici trasformazioni di RGB, altri cercano di riprodurre la percezione. Conoscerne pregi e limiti evita palette sbilanciate e confronti sbagliati.
HSV e HSL: RGB riorganizzato
HSV (tonalità, saturazione, valore) e HSL (tonalità, saturazione, luminosità) sono ricavati da RGB con formule geometriche. Si immagina il cubo RGB appoggiato su un vertice, con il nero in basso e il bianco in alto:
- la tonalità (hue) è un angolo da 0° a 360°: 0° rosso, 120° verde, 240° blu;
- la saturazione indica quanto il colore è lontano dal grigio;
- il valore (in HSV) o la luminosità (in HSL) indicano quanto è chiaro.
La differenza principale riguarda l'estremo superiore. In HSV, valore massimo e saturazione massima danno il colore puro. In HSL, luminosità 50% e saturazione massima danno il colore puro, mentre luminosità 100% è sempre bianco. Per questo HSL risulta simmetrico e intuitivo per schiarire e scurire, ed è molto usato nei CSS.
Il limite: non sono percettivi
HSL e HSV sono comodi, ma ingannevoli. Prendete i colori hsl(60, 100%, 50%) (giallo) e hsl(240, 100%, 50%) (blu): secondo il modello hanno la stessa luminosità. Ai nostri occhi il giallo appare molto più chiaro del blu. La "luminosità" di HSL è un calcolo sui valori RGB, non una misura di come percepiamo la chiarezza.
Le conseguenze pratiche sono concrete:
- una palette costruita ruotando la tonalità a luminosità costante produce colori con contrasti molto diversi;
- un testo bianco può essere leggibile su un blu e illeggibile su un giallo con la stessa "luminosità";
- le sfumature interpolate in HSL attraversano spesso colori inattesi.
CIE Lab: misurare la percezione
Nel 1976 la Commissione internazionale per l'illuminazione (CIE) ha definito lo spazio CIE L*a*b*, progettato perché distanze uguali corrispondano, il più possibile, a differenze percepite uguali:
| Componente | Significato |
|---|---|
| L* | chiarezza percepita, da 0 (nero) a 100 (bianco) |
| a* | asse verde (negativo) – rosso (positivo) |
| b* | asse blu (negativo) – giallo (positivo) |
Lab è indipendente dai dispositivi: descrive il colore come lo vedrebbe un osservatore standard sotto un illuminante dato. Per questo viene usato come spazio di riferimento nella gestione del colore e nelle misure industriali.
La sua forma polare, LCh, sostituisce a* e b* con croma (C, l'intensità) e tonalità (h, un angolo): diventa quindi un "HSL percettivo".
Delta E: quanto sono diversi due colori
La distanza tra due colori in Lab si chiama ΔE (Delta E). La formula originaria è una semplice distanza euclidea; formule successive, come CIEDE2000, correggono le zone in cui Lab non è uniforme, per esempio nei blu. Come ordine di grandezza, differenze di ΔE intorno a 1 sono al limite della percettibilità per un osservatore attento, mentre valori di diverse unità sono evidenti. Le tolleranze accettabili in un lavoro reale vanno però concordate caso per caso.
OKLab e OKLCH: un'alternativa moderna
Lab ha difetti noti: alcune sfumature di blu virano verso il viola quando si cambia la chiarezza. Nel 2020 Björn Ottosson ha proposto OKLab, uno spazio percettivo progettato per correggere questi problemi con calcoli semplici. La sua forma polare, OKLCH, è ora supportata nei CSS moderni con la funzione oklch().
Esempio: tre colori con la stessa chiarezza percepita e tonalità diverse.
oklch(70% 0.15 30) /* arancio */
oklch(70% 0.15 150) /* verde */
oklch(70% 0.15 260) /* blu */
Questi tre colori avranno un contrasto simile su uno stesso sfondo, cosa che con HSL non si otterrebbe. Va ricordato che non tutte le combinazioni di valori sono visualizzabili: con una croma alta, alcune tonalità escono dal gamut dello schermo e il browser le riporta dentro.
Quale modello usare
- HSL/HSV: selettori di colore, piccoli aggiustamenti, codice semplice. Va bene quando la coerenza percettiva non è critica.
- Lab/LCh: misure, controllo qualità, confronti tra campioni, gestione del colore.
- OKLCH: progettazione di palette e sistemi di colore per interfacce, generazione di sfumature, varianti chiare e scure di un colore di base.
Nel mio lavoro, quando devo creare una scala di colori per un'interfaccia, parto da OKLCH: fisso la tonalità, faccio variare la chiarezza a passi regolari e regolo la croma perché resti nel gamut sRGB. Il risultato è una scala in cui ogni gradino "pesa" visivamente come gli altri.
In sintesi
- HSL e HSV riorganizzano RGB in tonalità, saturazione e chiarezza, ma non sono percettivi.
- A parità di "luminosità" HSL, il giallo appare molto più chiaro del blu.
- CIE Lab è indipendente dai dispositivi e progettato per l'uniformità percettiva; ΔE misura le differenze.
- OKLab e OKLCH correggono alcuni difetti di Lab e sono supportati nei CSS moderni.
- Per palette coerenti usate un modello percettivo e verificate sempre che i colori restino nel gamut.
