Chroma

Chroma è l’asse di attributo del colore che cattura “quanta colorazione c’è nel colore” indipendentemente dalla luminosità. Un rosso puro e un rosa puro possono avere tonalità e luminosità simili ma chroma molto diverse — il rosa è più vicino al grigio, il rosso è più lontano dal grigio.

La chroma viene talvolta confusa con la saturazione. La distinzione:

• Chroma è la distanza assoluta dall’asse acromatico (grigio) a una data luminosità, misurata nello spazio di colore scelto (OKLab, CIELAB, ecc.).
• Saturazione è il rapporto tra chroma e luminosità — una misura relativa.

Questo è importante nel design perché OKLCH (la moderna funzione di colore CSS) usa la chroma, non la saturazione. oklch(0.72 0.18 47) significa luminosità 0,72, chroma 0,18, tonalità 47°. Modificare la chroma da sola mantiene stabile la luminosità e la tonalità; con la saturazione, modificare un valore cambia anche la luminosità percepita.

La chroma massima raggiungibile varia in base alla tonalità e alla luminosità. In sRGB, il giallo a luminosità media può supportare più chroma del blu alla stessa luminosità — i primari gialli sono più vicini al confine del gamut sRGB. I valori OKLCH che superano il gamut sRGB vengono tagliati al confine, spostando a volte inaspettatamente il colore renderizzato. Per un design percettivamente coerente su un’ampia gamma di tonalità, scegli un valore di chroma (ad es., 0,12-0,15) che sia raggiungibile per ogni tonalità di cui hai bisogno.

Esempio pratico

Costruisci una palette da grigio a rosso in 9 passaggi. In HSL potresti iniziare da hsl(0 0% 50%) e terminare a hsl(0 100% 50%), scalando linearmente la saturazione. I passaggi intermedi sembrano ottimi per il rosso, ma lo stesso approccio per il blu (hsl(240 0% 50%) → hsl(240 100% 50%)) produce un punto medio che sembra notevolmente più scuro del punto medio rosso — la luminosità HSL non è percettivamente uniforme. In OKLCH, fissando la luminosità a 0,65 e scalando la chroma da 0 a 0,18 si producono nove passaggi che corrispondono in luminosità percepita tra le tonalità. In concreto: oklch(0.65 0.00 0), oklch(0.65 0.0225 0), …, oklch(0.65 0.18 0) si trovano tutti sulla stessa linea di luminosità percepita. Ripeti la stessa progressione di chroma alla tonalità 240 (blu) e la scala di blu risultante affiancherà visivamente la scala di rosso passo dopo passo — impossibile da ottenere con HSL.

Numericamente, i valori di chroma OKLCH per i colori sRGB nel gamut ricadono approssimativamente nell’intervallo 0-0,37. Il massimo dipende dalla tonalità e dalla luminosità: a L=0,6, il rosso più saturo raggiungibile in sRGB ha una chroma di circa 0,25; il giallo più saturo circa 0,21; il blu più saturo circa 0,31. Conoscere questi limiti evita di specificare valori di palette impossibili che il browser taglierà silenziosamente.

Quando e perché è importante

La chroma è importante ogni volta che hai bisogno di colori coerenti tra le tonalità — sistemi di design con scale di colori semantiche (red-50 fino a red-900, blue-50 fino a blue-900, ecc.), visualizzazioni di dati con palette categoriche che devono essere ugualmente leggibili, e interfacce utente accessibili in cui i rapporti di contrasto dipendono dalla luminosità percepita (non grezza). La palette Tailwind v4, Radix Colors e il sistema di design IBM Carbon pubblicano tutti rampe OKLCH controllate dalla chroma per questo motivo. L’errore da evitare è trattare “saturazione” come sinonimo di “intensità”: aumentare la saturazione in HSL trascina con sé la luminosità, mentre aumentare la chroma in OKLCH no. Per la visualizzazione dei dati, la regola pratica è scegliere la chroma massima raggiungibile per ogni tonalità necessaria (tipicamente circa 0,10-0,13 per sRGB nel gamut su tutte le tonalità), poi mantenere la chroma fissa e variare la luminosità per i passaggi della scala. Riferimento: W3C CSS Color Module Level 4 — OKLab e OKLCH.

Perché OKLab/OKLCH ha sostituito HSL per il lavoro di design serio: HSL è una semplice trasformazione algebrica di RGB — il suo asse “luminosità” non è percettivamente uniforme. Due colori HSL con valori di luminosità identici possono sembrare molto diversi nella luminosità effettiva; un giallo con luminosità HSL del 50% appare molto più luminoso di un blu con lo stesso valore. OKLab (Björn Ottosson, 2020) è stato progettato specificamente in modo che l’asse L corrisponda alla percezione della luminosità umana, e l’asse della chroma corrisponda alla saturazione percepita. Passi uguali in OKLab sembrano passi uguali all’occhio. CSS Color Module Level 4 ha aggiunto le funzioni oklab() e oklch() per questo motivo, e i sistemi di design (Tailwind 4, Radix Colors) pubblicano sempre più scale di palette generate in OKLCH per garantire la coerenza percettiva. Correlato: cromaticità, sRGB, gamut. Riferimento: Björn Ottosson — Uno spazio di colore percettivo per l’elaborazione delle immagini (2020).