# Interpolazione OKLCH nei gradienti CSS per sfumature più morbide

[Canonical HTML page](https://gradiently.design/it/guide/css-gradient-oklch)

La maggior parte dei gradienti spenti, con il centro grigio, non è un problema di colore ma di matematica. Due parole, in oklch, cambiano dove il browser fa i calcoli.

## The short version

- I gradienti CSS sfumano in sRGB per impostazione predefinita quando tutti i loro colori sono scritti in esadecimale, rgb() o hsl(), e spesso il centro della sfumatura risulta spento o grigio.
- Aggiungere in oklch o in oklab a un gradiente dice al browser di sfumare in uno spazio colore percettivo, che mantiene uniforme la luminosità e puliti i colori.
- in oklab prende il percorso più diretto tra due colori, mentre in oklch gira attorno al cerchio delle tonalità e mantiene alta la saturazione.
- Parole chiave come shorter hue, longer hue, increasing hue e decreasing hue scelgono in che verso un gradiente oklch gira attorno al cerchio cromatico.
- I browser ignorano le dichiarazioni che non riescono a interpretare, quindi scrivere prima un gradiente sRGB e dopo la versione oklch è una riserva sicura.

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.

- sRGB (predefinito per esadecimale): `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Da blu a giallo in tre modi. L’sRGB passa per il grigio; oklab resta pulito e neutro; oklch mantiene il colore pieno passando per il verde acqua e il verde.

## 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](https://gradiently.design/it/guide/muddy-gradients).

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.

```css
/* 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);
```

Cambia solo la sfumatura; i punti di colore restano come scritti.

| Spazio colore | Come sfuma | Da usare per |
| --- | --- | --- |
| `srgb` | Fa la media di rosso, verde e blu | Riprodurre esattamente vecchi design |
| `srgb-linear` | Fa la media della luce fisica | Effetti di miscela di luce; i punti medi sembrano luminosi |
| `oklab` | Linea retta in uno spazio percettivo | La maggior parte delle sfumature, e ogni dissolvenza verso bianco, nero o grigio |
| `oklch` | Attorno al cerchio delle tonalità a croma costante | Sfumature vivide a più tonalità, arcobaleni, tramonti |
| `hsl` | Attorno al cerchio delle tonalità, non percettivo | Cerchi cromatici; la luminosità è irregolare |

Gli spazi che userai più probabilmente. La [pagina MDN sul metodo di interpolazione del colore](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) li elenca tutti.

## 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.

- Da rosa a verde acqua, in oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Da rosa a verde acqua, in oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Da indaco a bianco, in oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Da viola ad arancione, in oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Oklab resta sul percorso diretto; oklch spazia tra le tonalità intermedie: da rosa a verde acqua passa per viola e blu, da viola ad arancione per magenta e rosso.

> **Dissolvenza verso bianco, nero o grigio** I colori neutri non hanno una vera tonalità, quindi una sfumatura oklch verso il bianco o il nero può prendere una strada strana. Per le dissolvenze verso un neutro usa `in oklab`, oppure scrivi l’estremo neutro come quasi neutro con la stessa tonalità dell’altro estremo, come `oklch(97% 0.02 290)`.

## 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.

- Da rosso a blu, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Da rosso a blu, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

La via breve dal rosso al blu passa per magenta e viola. La via lunga passa per arancione, giallo, verde e ciano.

`longer hue` è il modo più ordinato di disegnare uno spettro: due punti invece di sette. È anche il modo di creare un [gradiente arcobaleno](https://gradiently.design/it/guide/rainbow-gradient) 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](https://oklch.com) è un buon selettore per trovare i valori.

```css
.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)
  );
}
```

Da viola a corallo ad ambra con una sola luminosità: nessun punto risalta come più luminoso degli altri.

Luminosità uguale: viola, corallo, ambra: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

Il codice qui sopra, disegnato. I colori fuori dalla gamma di uno schermo vengono portati al colore più vicino che può mostrare.

## 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.

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

Colore piatto, poi sRGB, poi oklch. Ogni browser tiene l’ultima riga che capisce.

Se vuoi spingerti oltre, le sfumature percettive si abbinano bene alla grana per evitare il [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding), e alle tecniche di punti e indicazioni nella guida al [gradiente lineare in CSS](https://gradiently.design/it/guide/css-linear-gradient).

## FAQ

### Cosa fa in oklch in un gradiente CSS?

Fa calcolare al browser i colori intermedi nello spazio colore OKLCH, che mantiene uniforme la luminosità e saturi i colori invece di sfumare attraverso il grigio.

### Devo usare oklab o oklch per i gradienti?

Usa oklch per sfumature vivide tra tonalità diverse, e oklab per dissolvenze verso bianco, nero o grigio, o quando non vuoi che la sfumatura passi per tonalità in più.

### Perché il mio gradiente oklch passa per il verde?

OKLCH percorre il cerchio delle tonalità e tra blu e giallo la via più breve passa per il verde. Usa `in oklab` per un percorso diretto, oppure aggiungi un punto intermedio.

### Devo scrivere i colori in oklch() per usare l’interpolazione oklch?

No. I colori esadecimali funzionano benissimo con `in oklch`; cambia solo la sfumatura. Scrivere i punti in `oklch()` è utile quando vuoi controllare con precisione la luminosità.

### Cosa succede nei browser che non supportano in oklch?

Ignorano l’intera dichiarazione. Metti un normale gradiente sRGB sulla riga prima e quei browser tengono quello.