Gradienti monocromatici: una tinta, tante sfumature

Un gradiente monocromatico fonde una tinta attraverso le sue stesse sfumature, dal profondo al chiaro, senza introdurre un secondo colore. Dal nero al bianco passando per il grigio è la versione più pura; anche un blu notte che sale verso un azzurro pallido, o una melanzana che si schiarisce in lilla, sono gradienti monocromatici. Sembrano calmi e costosi perché nulla compete, e per lo stesso motivo mostrano ogni difetto: bande, punti medi fangosi e una tinta che deriva a metà strada. I codici e il CSS qui sotto evitano tutti e tre.

Gradiente monocromatico e combinazione di colori monocromatica

I due termini sono imparentati e spesso confusi. Una combinazione di colori monocromatica è una palette: diverse tinte, toni e sfumature di un’unica tonalità usate in tutto un design. Un gradiente monocromatico è una singola sfumatura dentro quell’idea. Puoi usare un gradiente monocromatico in un design la cui palette non è affatto monocromatica, come uno sfondo blu profondo sotto un testo arancione.

Codici di gradienti monocromatici da copiare

Ognuno mantiene una sola tinta e cambia solo la luminosità e un po’ di saturazione. I punti più scuri sono leggermente più saturi di quelli chiari, ed è così che si comporta il colore vero nell’ombra e per questo sembrano naturali.

Per il lato scuro di questa famiglia da solo, vedi i gradienti neri e i gradienti grigi. Per come si relazionano i passaggi, tinte, toni e sfumature è la lettura di base.

Come fare un gradiente monocromatico in CSS

Il modo più semplice per tenere una sola tinta è scrivere i punti in oklch e cambiare solo il primo numero, la luminosità. L’angolo della tinta resta fisso, quindi il colore non può vagare, e oklch distribuisce uniformemente la luminosità, così la sfumatura sale a passo costante. OKLCH spiegato tratta il formato.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Scegli la tinta

   Scegli un colore e trova il suo angolo di tinta. Un blu sta intorno a 260, un verde intorno a 145, un rosso intorno a 25.

2. 2

   Imposta i punti più scuro e più chiaro

   Tieni il lato scuro sopra il nero puro e quello chiaro sotto il bianco puro, a meno che tu non voglia un bordo netto. Una luminosità da 0,15 a 0,9 è un intervallo comodo.

3. 3

   Posiziona il punto centrale con intenzione

   Spostalo verso il lato che vuoi far dominare. Un punto centrale al 30 per cento dà un riquadro per lo più chiaro; al 70 per cento, per lo più scuro. I punti colore del gradiente ne mostra di più.

4. 4

   Aggiungi la grana

   Un tenue strato di rumore sopra il gradiente nasconde le bande e dà una sensazione materica.

Perché i gradienti monocromatici scuri formano bande

La maggior parte degli schermi mostra 256 livelli per canale. Un gradiente dal nero #000000 al grigio scuro #282828 ha solo 40 gradini distinti con cui lavorare. Stiralo su un hero largo 1920 pixel e ogni gradino diventa una striscia di 48 pixel, che l’occhio nota facilmente al buio. I gradienti multicolore lo nascondono perché i canali cambiano in momenti diversi; un gradiente monocromatico cambia tutti e tre insieme, quindi le bande si allineano.

Le bande nei gradienti e i gradienti con grana approfondiscono la soluzione, con il codice per uno strato di rumore SVG.

Dove funzionano i gradienti monocromatici

Poiché portano un solo colore, i gradienti monocromatici lasciano guidare testo e fotografia. Vanno bene per lanci di prodotti di lusso, studi di architettura, uscite musicali e qualsiasi brand la cui identità sia un colore solo. Imposta le parole nel lato più chiaro o più scuro della stessa tinta, oppure in bianco o in nero, e il design si legge come un’unica decisione sicura.

Se ti serve un accento, prendilo fuori dalla tinta e usalo una volta sola: un’unica data arancione su un gradiente blu notte, o un prezzo rosso su grafite. Il gradiente resta monocromatico, e l’accento si prende tutta l’attenzione perché nient’altro ci compete.

Uno sfondo monocromatico in Gradiently può anche muoversi: un Mark rende la sua luce dal vivo, quindi un gradiente a colore singolo può scorrere lentamente dietro le parole e, con Pro, si esporta come loop senza interruzioni in ogni formato che disegni.