Spazio colore OKLCH: perché giallo e blu al 50% di luminosità non pesano uguale

La schermata è quella di un piccolo strumento web per costruire palette: a sinistra una curva a campana che governa il croma, al centro sei colonne di colore (Violet, Blue, Green, Amber, Red, Neutral) divise in dodici gradini numerati da 50 a 750 con il codice esadecimale sotto il nome, a destra un pannello di analisi con un grafico croma per chiarezza e una ruota di colore tagliata a una precisa lightness. Nessun campionario di tinte scelte a occhio: è una macchina che genera colori secondo una regola. E la regola, qui, è quella dello spazio colore OKLCH. Lavoro da anni con sistemi di colore per interfacce, segnaletica e materiali stampati, e quando ho iniziato a ragionare in questo modo ho avuto la stessa sensazione che ho sentito descrivere da chi ci passa: dopo OKLCH, la vecchia ruota HSL sembra una scatola di pastelli.

Il fatto che tutti hanno visto e quasi nessuno sa spiegare

Prendete un selettore di colore classico, di quelli con tinta, saturazione e luminosità. Mettete il giallo al 50% di luminosità e il blu al 50%. Sullo schermo il giallo brilla come una lampadina accesa, il blu sprofonda in una caverna. Stesso numero, due mondi. Non è il monitor, non è il vostro occhio stanco: è il modello. Quel 50% non descrive quanto il colore appare chiaro, descrive una posizione aritmetica fra il valore massimo e minimo dei tre canali rosso, verde e blu del segnale. È un numero, non una sensazione.

Il peccato originale dell’HSL, e perché gli vogliamo comunque bene

HSL e HSV nascono nel 1978 con un lavoro di Alvy Ray Smith sui gamut di colore: servivano a dare agli artisti dei primi sistemi grafici tre manopole comprensibili al posto di tre cursori RGB. Erano, dichiaratamente, una trasformazione geometrica comoda dello stesso cubo RGB, non un modello di come l’occhio percepisce. Hanno funzionato benissimo per quarant’anni perché erano semplici da calcolare su hardware lentissimo. Il problema arriva quando si pretende che reggano una palette intera: appena si ruota la tinta tenendo fermi saturazione e luminosità, il peso visivo scappa. Il giallo esplode, il blu si spegne, il viola resta a metà strada. Chi progetta interfacce lo ha sempre compensato a mano, correggendo decine di valori a occhio e senza riuscire a spiegare la regola.

Da Munsell a CIELAB: misurare il colore come lo vede un essere umano

Il tentativo di mettere ordine è vecchio di un secolo. Si parte dai campioni fisici ordinati per tinta, valore e croma, cioè da una scala costruita sul giudizio di osservatori veri e non su una formula. La svolta tecnica arriva nel 1976, quando la CIE definisce lo spazio L*a*b*: una chiarezza L* che vuole corrispondere alla sensazione, e due assi cromatici opponenti. Da lì nascono le formule di differenza di colore che da allora regolano controllo qualità, tessile, stampa, vernici. CIELAB non è perfetto — la sua uniformità regge male in certe zone, in particolare sui blu — ma stabilisce il principio: lo spazio del colore va costruito sui dati sperimentali di percezione, non sul segnale elettrico.

OKLab, dicembre 2020: semplice abbastanza da essere usato davvero

Il passo che ha cambiato il mestiere quotidiano è recente. A dicembre 2020 l’ingegnere svedese Björn Ottosson pubblica OKLab, uno spazio pensato per l’elaborazione di immagini e per le interfacce: prende come riferimento le previsioni di chiarezza e saturazione di un modello di apparenza del colore moderno e i dati sperimentali di uniformità di tinta, e li approssima con una matematica sufficientemente leggera da poter girare dentro un browser o uno shader. Il nome stesso è un programma: non il massimo teorico, ma qualcosa di ok, cioè abbastanza buono da essere adottato. La versione in coordinate polari si chiama OKLCH ed è quella che si usa per progettare: L per quanto è chiaro, C per quanto è carico, H per la tinta in gradi. Oggi si scrive direttamente nei fogli di stile dei siti, perché la specifica CSS Color Level 4 del W3C definisce la funzione oklch() insieme agli altri spazi percettivi.

Perché separare le tre manopole cambia il lavoro

Nella schermata si vede esattamente il beneficio. I dodici gradini di ogni colonna condividono gli stessi livelli di chiarezza: Violet 351, Blue 351, Green 351, Amber 351, Red 351 e Neutral 351 sono tinte diverse ma hanno lo stesso peso sulla pagina. È la cosa che con HSL non si riesce a ottenere se non per tentativi. In pratica significa che si può cambiare la tinta di un marchio, di una collana editoriale o di un’etichetta senza rifare tutte le gerarchie: il testo resta leggibile, i bottoni restano allo stesso livello di importanza, nessun colore buca la composizione. Nella mia esperienza è qui che si recupera il tempo: le revisioni smettono di essere ritocchi infiniti e diventano la rotazione di un parametro. La stessa cosa vale per una presentazione o per un grafico: se le serie hanno pari chiarezza, nessuna sembra più importante solo perché è gialla.

La curva a campana e il perché del croma variabile

Il dettaglio più interessante del pannello di sinistra è la curva a campana sopra l’asse light–dark: il croma non è costante lungo la scala, cresce verso il centro e cala agli estremi. Non è un vezzo estetico, è fisica del dispositivo. Un colore quasi bianco o quasi nero non può essere molto carico, semplicemente perché nello spazio riproducibile da uno schermo non esistono quei colori. Il grafico di analisi a destra mostra proprio il massimo croma disponibile per ogni tinta a ciascun livello di chiarezza, con l’area grigia del gamut condiviso: il verde arriva lontanissimo in alcune zone, i blu molto meno. Progettare una scala significa muoversi dentro quella campana, non contro.

Gamut, badge P3 e la trappola dei blu

Accanto ad alcuni valori — gli ambra più carichi, qualche rosso — compare una piccola etichetta P3. Vuol dire che quel colore esiste solo nello spazio ampio Display P3 e non in sRGB: su un monitor comune verrà riportato dentro i confini, cioè smorzato. OKLCH descrive anche colori che nessuno schermo mostra: è un pregio, perché il modello non si ferma ai limiti di un dispositivo, ma impone una disciplina. Se la palette deve vivere su qualsiasi computer, va verificata in sRGB; se nasce per uno schermo wide gamut, va dichiarato. La zona dei blu merita attenzione a parte: è storicamente quella dove i modelli percettivi faticano di più e dove una rotazione di tinta può produrre derive visibili verso il viola. Quando lavoro su blu molto saturi non mi fido del numero e guardo il risultato.

L’effetto Helmholtz-Kohlrausch, cioè il limite onesto

C’è un fenomeno che nessuna L spiega del tutto: a parità di luminanza, un colore molto saturo appare più chiaro di uno smorto. È l’effetto Helmholtz-Kohlrausch, documentato da oltre un secolo e ancora oggetto di misure su schermi e su supporti stampati. Significa che un rosso pieno e un grigio con la stessa chiarezza nominale non daranno la stessa impressione di peso. OKLCH riduce enormemente la distanza fra numero e sensazione, ma non la azzera: resta un modello, e i modelli vanno verificati con gli occhi.

Contrasto e leggibilità: lo strumento aiuta, non assolve

Un equivoco frequente è pensare che una scala percettivamente uniforme garantisca l’accessibilità. Non è così. I criteri delle linee guida internazionali sul contrasto si basano su un rapporto di luminanza relativa, con soglie minime per il testo normale e per quello grande: due colori possono avere una differenza di L piacevole all’occhio e restare sotto soglia. Quello che OKLCH dà è la prevedibilità: se la distanza di chiarezza fra i gradini è costante, so in anticipo quali coppie funzioneranno, e il controllo diventa una verifica finale invece di una caccia al tesoro.

Tre prove pratiche, anche senza scrivere una riga di codice

Queste tre verifiche le faccio su qualunque palette, che sia per un sito, per un’etichetta di vino o per i colori di una presentazione.

La conversione in bianco e nero. Togliete il colore. Se due tinte diventano due grigi identici, non stanno distinguendo nulla: stanno solo decorando. Se una diventa quasi bianca e l’altra quasi nera, la gerarchia è troppo violenta.
La prova a schermo lontano. Allontanatevi di tre metri o rimpicciolite l’immagine fino a un francobollo. Ciò che resta leggibile è la struttura reale del progetto; ciò che salta all’occhio per primo è il colore che avete reso troppo pesante.
Fondo chiaro e fondo scuro. Lo stesso colore cambia carattere a seconda di ciò che lo circonda. Una scala ben costruita ha, per ogni ruolo, un gradino che funziona su bianco e uno simmetrico che funziona su nero.

Il valore di uno strumento come quello della schermata non è generare bei colori: è rendere esplicita una regola che prima stava solo nell’intuito di chi disegna. Chi, come me, ha più metodo che talento grafico puro, qui trova il suo alleato migliore — e chi ha talento ci guadagna tempo. In entrambi i casi, una volta che si ragiona per chiarezza, croma e tinta separati, tornare indietro è praticamente impossibile.