Gradiente grigio: codici neutri che non annoiano

Un gradiente grigio smette di sembrare noioso nel momento in cui i suoi grigi hanno una dominante. I grigi neutri puri, con rosso, verde e blu uguali, sembrano piatti e digitali. Spostali leggermente verso il freddo, il blu, e ottieni nebbia, ardesia e acciaio; spostali verso il caldo, il marrone, e ottieni pietra, cemento e peltro. Aggiungi una luce che arriva da qualche parte e un colore d’accento, e il grigio diventa calmo, moderno e discretamente sicuro. Seguono i codici per ciascuno.

Grigio caldo o grigio freddo: sceglierne uno

I grigi freddi sembrano tecnici, puliti e precisi. I grigi caldi sembrano architettonici, naturali e morbidi. Entrambi funzionano benissimo da soli. Insieme in un gradiente litigano e il risultato sembra una macchia. Guarda i campioni qui sotto a coppie: la riga in alto vira al blu, quella in basso al marrone, e la differenza è piccola ma evidente una volta che l’hai vista.

Codici di gradiente grigio freddo e caldo

Nebbia e ardesia sono la coppia fredda: nebbia per layout chiari e aerei, ardesia per quelli scuri e seri. Tempesta aggiunge una nuvola illuminata, che dà vera profondità a un grigio scuro. Pietra e cemento sono la coppia calda, più vicini ai materiali da costruzione, e la grafite è il quasi nero che puoi usare al posto del nero puro.

Se vuoi scendere ancora, i codici del gradiente nero proseguono dalla grafite. Per i design costruiti con una sola tonalità a molti livelli di luminosità, vedi il gradiente monocromatico.

Argento, acciaio e altri gradienti grigi metallici

Il metallo non è un colore, è un riflesso. Un gradiente argento funziona grazie a una banda netta e chiara stretta tra punti più scuri, come la luce che colpisce una superficie curva. Il canna di fucile usa lo stesso trucco a un livello più scuro, e l’acciaio spazzolato aggiunge sottili linee parallele. Sono audaci, quindi usali per un badge, una targa del titolo o un solo pannello e non per un’intera pagina.

L’acciaio spazzolato rende meglio quando le linee stanno su un gradiente morbido illuminato e non da sole. Bastano due strati:

.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}

Grigio più un colore

Pochi sfondi esaltano un singolo colore forte come il grigio. L’accento sembra più brillante sul neutro che su altri colori, quindi ne basta poco: una parola, un pulsante, una riga. Scegli l’accento in base al settore e all’atmosfera.

Schemi completi costruiti così si trovano in le palette di colori tecnologici e le palette di colori neutri.

Il grigio che sembra voluto

Le bande meritano un avviso a parte. I grigi non hanno una tonalità che distragga l’occhio, quindi ogni passaggio di un gradiente liscio si vede, soprattutto su schermi grandi e dopo la compressione. Uno strato leggero di rumore lo nasconde; la texture di rumore in CSS ha uno snippet e le bande nei gradienti spiega perché accadono.

Gradienti grigi nei siti web e nel tema scuro

Sul web i gradienti grigi lavorano meglio in silenzio. Un gradiente nebbia dietro una sezione di funzioni la separa da una pagina bianca senza un bordo netto. Nel tema scuro, un gradiente grafite che si schiarisce un poco verso l’alto di una scheda le dà profondità, dove un grigio piatto sembrerebbe un buco. Tieni piccola la variazione tra i punti, pochi punti percentuali di luminosità, così il gradiente si legge come luce e non come decorazione. Il design per il tema scuro tratta le regole più ampie per le interfacce scure, dai colori delle superfici al contrasto.

Sfondi sfumati grigi nella pratica

Architetti, studi di ingegneria e aziende software usano il grigio perché lascia parlare il lavoro. Un gradiente ardesia con testo bianco e un accento blu rende preciso l’annuncio di un progetto; un gradiente pietra calda con testo grafite dà a una copertina di portfolio un aspetto tattile. Il branding di uno studio di architettura mostra fin dove arriva una palette sobria.

Gli sfondi discreti sono dove un sistema di design ripaga. In Gradiently un Mark grigio porta la sua grana, che tiene a bada le bande, e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga mentre il grigio cambia lungo il fotogramma.