Interpolazione dei gradienti: sRGB, OKLab e perché conta

L’interpolazione dei gradienti è il modo in cui si calcolano i colori tra i tuoi passaggi. Scegli il blu a un’estremità e il giallo all’altra; il software deve inventare ogni colore in mezzo, e lo fa tracciando una linea tra i due colori in un certo spazio colore. Quale spazio usa cambia ciò che vedi. Miscela in sRGB e da blu a giallo passi per un grigio piatto. Miscela in OKLCH e passi per un turchese brillante. Stessi passaggi, gradiente molto diverso.

Che cosa significa interpolazione dei gradienti

Ogni colore si può descrivere come un punto in uno spazio. In sRGB i tre assi sono rosso, verde e blu. In OKLab sono la luminosità e due assi opposti, da verde a rosso e da blu a giallo. In OKLCH sono luminosità, croma (quanto è colorato) e tonalità (l’angolo sulla ruota). Interpolare significa camminare da un punto all’altro. Una camminata dritta in uno spazio può essere una curva, o una deviazione per il grigio, in un altro.

sRGB, OKLab e OKLCH a confronto

Perché i gradienti in sRGB diventano grigi o sporchi

L’sRGB è stato progettato per gli schermi, non per l’occhio. I suoi numeri sono codificati con gamma e i suoi assi non coincidono con il modo in cui vediamo tonalità o luminosità. Quando due colori stanno sui lati opposti della ruota, la linea retta che li unisce passa vicino al centro neutro, quindi il mezzo perde il colore. Blu e giallo fanno in media #808080. È la causa principale dei gradienti sporchi, ed è per questo che l’istinto del designer di aggiungere un colore ponte funziona: il passaggio in più piega il percorso attorno al grigio.

OKLab: passi uguali per l’occhio

OKLab, pubblicato da Björn Ottosson nel 2020, è stato costruito perché distanze uguali sembrino differenze uguali. Il risultato pratico è un gradiente la cui luminosità cambia in modo uniforme da un capo all’altro, senza avvallamenti scuri né rigonfiamenti chiari al centro. Segue ancora un percorso dritto, quindi due veri opposti perdono un po’ di colore al centro, ma molto meno che in sRGB. Il CSS moderno usa OKLab per impostazione predefinita ogni volta che un colore del gradiente è scritto con una sintassi più recente come oklch().

OKLCH: tenere vivo il colore

OKLCH è lo stesso spazio di OKLab, descritto in forma polare: luminosità, croma e un angolo di tonalità. Interpolare in esso significa girare attorno alla ruota, così i colori intermedi mantengono la saturazione. È ideale per gradienti vividi e centrati sul brand e per i gradienti arcobaleno. Puoi anche scegliere da che parte percorrere la ruota con shorter hue (il predefinito), longer hue, increasing hue o decreasing hue. La guida a OKLCH spiega lo spazio più a fondo.

Come impostare l’interpolazione dei gradienti in CSS

Aggiungi in <spazio> prima dei passaggi, dopo l’eventuale angolo o forma. I browser che non lo capiscono ignorano l’intera dichiarazione, quindi scrivi prima una versione sRGB come ripiego. Ogni spazio e parola chiave di tonalità è elencato nel riferimento MDN sull’interpolazione dei colori, e i gradienti CSS in OKLCH hanno altre ricette.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Quale spazio colore scegliere

1. 1

   Parti da OKLab

   Per la maggior parte delle miscele di due o tre colori dà il risultato più liscio, senza sorprese.

2. 2

   Usa OKLCH per colori distanti o vividi

   Quando i colori stanno lontani sulla ruota e vuoi che il centro resti luminoso.

3. 3

   Tieni l’sRGB per riprodurre lavori vecchi

   Se un gradiente deve essere identico a una risorsa o un’immagine esistente, miscela nello stesso spazio in cui è stata creata.

4. 4

   Controlla il punto medio

   Qualunque sia lo spazio, guarda il colore a metà strada. Se è grigio o una tonalità che non ti aspettavi, cambia lo spazio o aggiungi un passaggio.

L’interpolazione è solo una parte di una buona miscela; conta altrettanto dove stanno i passaggi, come spiegano i passaggi di colore dei gradienti. Se preferisci saltare la matematica, i Mark di Gradiently sono sfondi a gradiente finiti che si disegnano a ogni misura in cui progetti, e la documentazione per sviluppatori mostra come ChatGPT o Claude possano cercare Mark e creare design che si aprono nello Studio.