Gradiente nero: come usare il nero quasi puro

Un gradiente nero è una sfumatura che passa tra toni quasi neri, o dal nero verso un colore, così un design scuro ha profondità e luce invece di un vuoto piatto. Quelli che sembrano costosi non usano quasi mai il #000000 puro. Partono da un nero tinto, come #0b0b10, fanno variare la luminosità di pochi punti percentuali e aggiungono una sola fonte di colore o di luce da qualche parte nel campo.

Questa guida ti dà neri tinti, codici di gradienti neri da copiare, il rimedio al banding che affligge le sfumature scure e le regole per il testo. Per gli sfondi scuri in generale, vedi sfondi con gradienti scuri; per le basi di come funzionano le sfumature, parti da che cos’è un gradiente.

Perché il nero puro sembra piatto

Il #000000 non ha tinta e non ha niente di più scuro a cui arrivare, quindi un design costruito su di lui non ha ombre, solo un’assenza. Nella vita reale niente è così nero: una stanza buia, un cielo di notte e un tessuto nero hanno tutti una traccia di colore e una lenta variazione di luminosità. L’occhio legge quella variazione come profondità.

C’è anche un motivo pratico. Sugli schermi OLED i pixel di nero puro si spengono del tutto e su alcuni telefoni impiegano un attimo a riaccendersi, il che può lasciare una scia quando i contenuti scuri scorrono. Alzare il valore più scuro di qualche gradino sopra lo zero evita il problema e non ti costa nulla a livello visivo.

Neri tinti: i colori dentro un buon nero

Un nero tinto è un colore molto scuro con un po’ di saturazione rimasta dentro. In HSL, tieni la luminosità tra circa il 4% e il 9% e lascia la saturazione tra il 15% e il 40%. La tinta decide l’atmosfera: i neri bluastri sanno di tecnico e di freddo, i marroni caldi di pelle e di caffè, il melanzana di sera.

Se lavori in OKLCH, i numeri sono più facili da ragionare: luminosità intorno al 15%-20% e croma tra 0,005 e 0,025. L’Inchiostro qui sopra è oklch(15.2% 0.011 285), un nero con un sussurro di blu. La nostra guida ai codici colore spiega come leggere questi valori.

Codici di gradienti neri da copiare

Ognuno di questi tiene il valore più scuro sopra il nero puro e cambia la luminosità con dolcezza. Usali come sfondi interi, sezioni hero o fondi per slide, e scegli quello la cui temperatura si abbina al tuo colore d’accento.

La direzione conta più sul nero che ovunque altrove, perché c’è così poco altro in gioco. Una luce che cade dall’alto sembra naturale e calma. Una luce che sale da un angolo in basso sembra un bagliore, come uno schermo o una fiamma, e porta l’occhio su quell’angolo. Per saperne di più, vedi angoli dei gradienti.

Gradienti dal nero a un colore

I gradienti neri più d’effetto lasciano emergere un colore dal buio. Due regole li mantengono ricchi. Primo, dai al colore non più di un terzo del campo, così il nero resta la nota principale. Secondo, scurisci il colore verso il nero lungo la sua stessa tinta invece di farlo sfumare attraverso il grigio: un viola deve passare per un indaco profondo mentre scende, non per il carbone. Un centro grigio è la causa più comune dei gradienti sporchi.

I browser moderni possono fare parte del lavoro al posto tuo. Interpolare in OKLCH mantiene viva la croma del colore nei punti più scuri, e una riga di riserva semplice tiene coperti i browser più vecchi.

.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}

Come evitare il banding nei gradienti scuri

Gli schermi di solito mostrano 256 livelli per canale di colore. Un gradiente da #0a0a0a a #1a1a1a ha solo 16 di questi livelli con cui lavorare, quindi su un hero largo 1920 pixel ogni gradino è largo circa 120 pixel e si vedono le strisce. Questo è il banding nei gradienti, e i gradienti scuri ne soffrono più di tutti.

La grana è il rimedio più affidabile, perché spezza il bordo netto di ogni gradino in una texture che l’occhio rimescola. Bastano pochi punti percentuali di opacità. I gradienti con grana approfondiscono questo look; questo è il CSS minimo.

.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Testo e colore su un gradiente nero

Sui fondi neri quasi ogni testo chiaro supera il contrasto, quindi il rischio si sposta sul testo secondario. I grigi medi che vanno bene su un monitor luminoso possono scendere sotto il minimo di 4,5:1 per il testo corrente. Anche il bianco puro ha un costo: a qualcuno il bianco acceso su un quasi nero risulta duro nei passaggi lunghi, quindi un bianco caldo è più gentile e si legge comunque con nitidezza. Per le regole complete, vedi il contrasto dei colori.

Dove i gradienti neri funzionano meglio

• Lanci e rivelazioni, dove un fondo scuro fa sembrare illuminato un prodotto o un titolo
• Lusso, profumeria e gioielleria, in coppia con un accento metallico come #c9a96e
• Musica, vita notturna ed eventi, con un colore saturo che sale da un angolo
• Prodotti tech e per sviluppatori, dove i neri bluastri sembrano precisi
• Interfacce in modalità scura, con due o tre neri tinti come livelli di superficie
• Portfolio fotografici, dove una cornice nera discreta lascia i colori alle immagini

In Gradiently, il Mercato ti permette di cercare i Mark con parole di colore come «quasi nero» o «nero e oro», e ogni Mark porta già grana e luce, quindi i problemi di banding e di piattezza descritti sopra sono risolti prima che tu cominci.