Interpolazione OKLCH nei gradienti CSS per sfumature più morbide

L’interpolazione OKLCH nei gradienti CSS significa chiedere al browser di calcolare i colori intermedi di un gradiente nello spazio colore OKLCH invece che in sRGB. Aggiungi due parole dopo la direzione: linear-gradient(90deg in oklch, #2563eb, #facc15). Il risultato è una sfumatura la cui luminosità cambia in modo uniforme e il cui centro resta vivido, invece di afflosciarsi nella fascia grigia e sporca per cui sono note le sfumature sRGB semplici.

Perché i gradienti sRGB diventano grigi

L’sRGB è stato progettato per codificare in modo efficiente i colori degli schermi, non per corrispondere a come vedono le persone. Sfumare due colori sRGB significa fare la media dei loro numeri di rosso, verde e blu, e a metà tra un blu e un giallo c’è un insieme di numeri mediocri che sembra grigio. Anche la sua luminosità cambia in modo irregolare, quindi alcune sfumature si gonfiano più chiare o più scure al centro. Il lato progettuale del problema è in gradienti sporchi.

Oklab e la sua forma cilindrica, OKLCH, sono stati progettati perché passi uguali nei loro numeri sembrino passi più o meno uguali all’occhio. Sfumare al loro interno mantiene la luminosità percepita in movimento costante, ed è per questo che i gradienti fatti così sembrano più morbidi e brillanti con gli stessi estremi.

La sintassi: in oklch e in oklab

Il metodo di interpolazione va nel primo argomento, prima o dopo la direzione. Funziona in linear-gradient(), radial-gradient(), conic-gradient() e nelle loro forme ripetute, e anche in color-mix(). I tuoi punti di colore possono restare in esadecimale; cambia solo la matematica.

/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);

oklab o oklch: quale scegliere

Entrambi sono percettivi; differiscono per il percorso che prendono. Oklab traccia una linea retta tra i due colori, quindi il centro può perdere un po’ di saturazione quando gli estremi sono lontani sul cerchio cromatico, ma non vaga mai in una tonalità che non hai chiesto. OKLCH mantiene il croma, l’intensità del colore, e percorre il cerchio delle tonalità, quindi il centro resta saturo ma passa per le tonalità intermedie. Da blu a giallo in oklch passa per il verde. A volte è proprio lo scopo; a volte è una sorpresa.

Scegliere la direzione della tonalità

Tra due tonalità ci sono due modi di girare attorno al cerchio cromatico. Per impostazione predefinita oklch prende lo shorter hue. Puoi chiedere longer hue, oppure forzare un verso con increasing hue o decreasing hue. La parola chiave va subito dopo lo spazio colore.

longer hue è il modo più ordinato di disegnare uno spettro: due punti invece di sette. È anche il modo di creare un gradiente arcobaleno completo i cui colori sembrano tutti ugualmente luminosi, cosa che un arcobaleno sRGB non riesce mai del tutto.

Scrivere i colori in oklch()

Puoi scrivere in OKLCH anche i punti stessi: oklch(L C H), dove L è la luminosità da 0% a 100%, C è il croma da 0 fino a circa 0,37 e H è l’angolo della tonalità. Mantenere la stessa L su tutti i punti dà un gradiente di luminosità uguale, difficile da ottenere a occhio in esadecimale. oklch.com è un buon selettore per trovare i valori.

.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}

Supporto dei browser e alternative di riserva

I metodi di interpolazione e i colori oklch() sono supportati in Chrome, Edge, Safari e Firefox attuali. I browser saltano qualsiasi dichiarazione che non riescono a interpretare, quindi la riserva consiste semplicemente nello scrivere prima la versione semplice. Dove la riga migliorata viene ignorata, resta il gradiente sRGB.

.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}

Se vuoi spingerti oltre, le sfumature percettive si abbinano bene alla grana per evitare il banding nei gradienti, e alle tecniche di punti e indicazioni nella guida al gradiente lineare in CSS.