Perché alcuni gradienti diventano grigi al centro, e come evitarlo

Un gradiente fangoso è una sfumatura che diventa grigia, marrone o spenta al centro, anche se entrambi i suoi colori sono brillanti. Succede perché la maggior parte degli strumenti fonde i colori nello spazio colore sRGB, mescolando i valori di rosso, verde e blu in linea retta. Quando i due colori stanno su lati opposti della ruota, quelle linee rette si incontrano vicino al grigio. La soluzione è scegliere il percorso della sfumatura: aggiungi un colore al centro, fondi in OKLCH o usa tinte più vicine tra loro.

Perché i colori opposti diventano grigi

Guarda i numeri. Il blu puro è rosso 0, verde 0, blu 255. Il giallo puro è rosso 255, verde 255, blu 0. A metà strada, ogni canale arriva a circa 128, cioè #808080: un grigio medio. Lo stesso succede con rosso e ciano, arancione e azzurro, o qualsiasi altra coppia complementare. Matematicamente, la linea retta tra loro passa proprio per l’asse dei grigi.

Un secondo problema, più sottile, è il calo scuro. Dal blu al rosso in sRGB si passa per #800080, un viola più scuro di entrambe le estremità, quindi il centro della sfumatura sembra un livido. I colori non sono opposti, ma la sfumatura perde comunque luminosità dove si incontrano.

Soluzione 1: aggiungi uno stop centrale

La soluzione più semplice funziona in ogni strumento e in ogni formato: scegli il colore che vuoi al centro e mettilo lì tu. Scegli un colore brillante e saturo che stia tra le due estremità sulla ruota. Tra blu e giallo è un verde acqua o un verde. Tra arancione e blu, un rosa prende la strada calda, quella usata dalla maggior parte dei gradienti al tramonto.

Soluzione 2: fondi in OKLCH

OKLCH descrive il colore come luminosità, croma (intensità) e tinta, ed è stato progettato perché passi uguali sembrino cambiamenti uguali alle persone. Fondere in OKLCH mantiene alto il croma e gira attorno alla ruota delle tinte invece di tagliarla dritta, quindi la sfumatura non crolla mai nel grigio. In CSS lo chiedi con una sola espressione. Puoi anche scegliere in che verso percorrere la ruota.

/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }

Vale la pena conoscere anche OKLab. È il predefinito della sintassi dei colori CSS moderna e dà sfumature morbide e uniformi, ma dato che viaggia ancora in linea retta, i veri opposti perdono intensità al centro. Usa OKLab per colori già vicini; usa OKLCH o uno stop centrale per colori lontani. Per la sintassi completa, vedi i gradienti OKLCH in CSS, oppure esplora lo spazio su oklch.com.

Soluzione 3: scegli tinte più vicine

Il modo più affidabile per evitare il fango è non chiederlo. I colori vicini sulla ruota, come blu e viola o arancione e rosa, si fondono in modo pulito in qualsiasi spazio colore, perché la loro linea retta non passa mai vicino al grigio. Ecco perché i colori analoghi danno i gradienti più sicuri, e perché le coppie complementari richiedono attenzione; vedi i colori complementari.

Soluzione 4: controlla la luminosità

Il fango non è solo grigio. Una sfumatura può anche sembrare spenta quando la luminosità cala al centro, o quando un’estremità è molto più scura dell’altra e il passaggio avviene in una fascia stretta. Tieni la luminosità degli stop più o meno uniforme, oppure cambiala in modo costante in una direzione, e dai spazio al passaggio. Uno stop al 40% o al 60% spesso sembra più naturale di un meccanico 50%.

Il fango peggiora nei gradienti mesh, dove più colori si incontrano insieme. Le stesse regole valgono per ogni sovrapposizione: tieni vicini i colori confinanti, e metti un ponte tra gli opposti.

Se preferisci partire da una sfumatura già bilanciata, cerca nel Mercato con parole di colore come «blu e giallo» o «petrolio profondo» e crea design con qualsiasi Mark trovi.