Gradienti tramonto: palette arancio, corallo e crepuscolo

Un gradiente tramonto fonde colori caldi, oro, arancione e corallo, in rosa, viola e un blu sera profondo. È uno dei gradienti più amati nel design, perché tutti lo riconoscono e quasi a tutti piace. Ed è anche uno dei più facili da sbagliare. Il segreto è seguire l’ordine che il cielo usa davvero: caldo e luminoso all’orizzonte, sempre più freddo attraverso il rosa e il viola man mano che si alza lo sguardo. Salta quei colori intermedi e il gradiente diventa grigio.

L’ordine naturale dei colori del tramonto

Quando il sole è basso, la sua luce attraversa molta più atmosfera per arrivare fino a te. Lungo il percorso, l’aria disperde la luce blu fuori dal fascio diretto, quindi la luce vicino al sole arriva gialla, arancione e rossa. Più in alto nel cielo, lontano dal sole, resta più blu. Il risultato è una fascia di colori impilati dall’orizzonte verso l’alto.

Palette di gradienti tramonto, con i codici

Queste dieci palette seguono tutte l’ordine del cielo, dall’alto in basso. Alcune usano l’intera gamma; altre prendono solo l’estremità calda o solo il crepuscolo.

Synthwave è il cugino stilizzato e al neon di quello vero; i colori vaporwave e i gradienti retrò portano più avanti quella direzione.

Perché i gradienti tramonto si sporcano, e come rimediare

Ci sono due errori classici. Il primo è unire direttamente blu e arancione. Sono quasi opposti sulla ruota dei colori, e una sfumatura dritta tra i due fa una media grigia al centro. Il cielo non lo fa mai, perché passa attraverso il viola e il rosa. Il secondo è sfumare l’arancione nel nero per un’atmosfera più scura. L’arancione scuro è marrone, quindi il gradiente si legge come ruggine o fango invece che come sera.

Se vuoi meno punti, sfumare in OKLCH aiuta: mantiene i colori saturi al centro della sfumatura. Leggi gradienti OKLCH in CSS e, per la teoria, gradienti sporchi.

Dove funzionano i gradienti tramonto

I tramonti portano con sé una sensazione chiara: la fine della giornata, il calore, un po’ di nostalgia. Questo li rende naturali per alcuni lavori e strani per altri. Un tramonto luminoso e completo si adatta a eventi estivi, viaggi, musica e ospitalità. Una versione crepuscolare, soprattutto viola, si adatta a lanci serali, podcast e a tutto ciò che invita alla riflessione. Una versione solo calda, dall’oro al corallo, si adatta a food, bevande e momenti di saldi.

• Poster e inviti per eventi: i colori dicono «sera» prima della data.
• Viaggi e ospitalità: l’ora dorata è la luce più fotografata che esista, e le persone la riconoscono.
• Copertine musicali e playlist: le palette crepuscolari sembrano cinematografiche e un po’ malinconiche.
• Campagne stagionali: un tramonto che si raffredda durante l’autunno segna la stagione senza nuove grafiche.

Dove si adattano meno: finanza seria, sanità e tutto ciò che deve sembrare neutro. Il calore si legge come tempo libero. I colori del tramonto stanno anche saldamente sul lato caldo della ruota; i colori caldi e freddi spiegano come la temperatura cambia l’atmosfera di un design.

Come costruire il tuo gradiente tramonto

1. 1

   Scegli quanto cielo vuoi

   Tutta la gamma per il dramma, solo l’estremità calda per l’energia, o solo il crepuscolo per la calma.

2. 2

   Metti il caldo in basso

   Oro e arancione stanno vicino all’orizzonte. I tramonti capovolti possono funzionare, ma si leggono come stilizzati.

3. 3

   Non saltare mai un vicino

   Tra blu e arancione, inserisci viola e rosa. Tra arancione e scuro, inserisci prugna o indaco.

4. 4

   Dai meno spazio alla fascia calda

   Nei cieli veri i colori più luminosi abbracciano l’orizzonte. Limitarli al quarto inferiore fa sembrare naturale il gradiente.

5. 5

   Aggiungi grana

   I cieli lunghi e morbidi fanno facilmente banding. Uno strato di rumore fine mantiene morbida la sfumatura dopo la compressione.

Testo su un gradiente tramonto

La parte alta di un gradiente tramonto è scura e fredda, perfetta per il testo bianco. Quella bassa è luminosa e calda, perfetta per il testo scuro o per nessun testo. Il centro, dove il rosa incontra l’arancione, è il punto più difficile per entrambi. Metti i titoli in alto e i dettagli in basso, oppure tieni le parole in un’unica fascia calma.

.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}

Per altre palette di cieli e paesaggi, leggi palette di colori dalla natura, e per versioni guidate dal rosa, gradienti rosa.