In breve
- Una sfumatura di cielo convincente è più profonda in alto e più pallida all’orizzonte, perché la luce vicino all’orizzonte attraversa più aria.
- All’alba e al tramonto i colori caldi stanno in basso, vicino all’orizzonte, e i blu freddi restano sopra la testa.
- Stendi una sfumatura di cielo in verticale con
180degin CSS, così la parte alta del design si legge come la parte alta del cielo. - I cieli notturni sembrano più naturali con una fascia leggermente più chiara all’orizzonte che con un nero piatto.
- L’inchiostro scuro si legge bene sui cieli di mezzogiorno e poco su un cielo d’alba, mentre l’inchiostro chiaro va bene in alto sul cielo d’alba, al crepuscolo, all’ora blu e di notte.
In questa pagina
Una sfumatura di cielo va da un colore più profondo in alto a uno più pallido all’orizzonte, perché è così che si comporta la luce del giorno: la luce vicino all’orizzonte attraversa più aria, si diffonde di più e va verso il bianco. Azzecca quest’unica direzione e quasi ogni blu si legge come cielo. Qui sotto trovi codici da copiare per sei momenti del giorno, dalla prima luce a una notte senza luna, con note su dove funziona ciascuno e quale colore di testo ci sta sopra.
Come è organizzato il cielo vero
Guarda in su in una giornata serena: il blu sopra di te è più ricco del blu vicino ai tetti. All’alba e al tramonto la luce del sole attraversa così tanta atmosfera che la maggior parte del blu si disperde prima di arrivare a te, lasciando rossi, arancioni e rosa in basso mentre lo zenit resta freddo. Ne vengono due regole per qualsiasi sfumatura di cielo: profondo in alto, pallido in basso, e i colori caldi solo vicino all’orizzonte.
Codici di sfumatura per alba e sorgere del sole
L’alba è il cielo più morbido della giornata. In alto c’è ancora l’indaco della notte, al centro vira al lilla e sull’orizzonte sta una fascia di rosa e pesca. Dà un senso di quiete e speranza, ed è per questo che si adatta a brand del benessere, routine mattutine, annunci di qualcosa di nuovo e tutto ciò che vuole sembrare gentile e non rumoroso.
Sfumature del cielo sereno di mezzogiorno e del giorno
Un cielo sereno a mezzogiorno è la classica sfumatura azzurro cielo: blu saturo in alto che sfuma in un blu pallido, quasi bianco, all’orizzonte. Tieni stabile la tonalità e lascia che sia la luminosità a lavorare. Se il punto in basso vira al grigio invece che al blu pallido, il cielo comincia a sembrare inquinato. Un pomeriggio velato è la stessa idea con meno saturazione, e una giornata coperta scambia il blu con un grigio freddo.
Per altri blu oltre il cielo, dal blu notte al ghiaccio, vedi i codici della sfumatura blu. Se vuoi anche l’acqua sotto il cielo, l’articolo sulla sfumatura oceano funziona al contrario: pallida in alto, profonda in basso.
Codici per ora d’oro, crepuscolo e ora blu
Il cielo della sera è dove le sfumature di cielo diventano drammatiche. L’ora d’oro tiene un blu diurno in alto e un ambra intenso all’orizzonte, e la morbida fascia grigiastra tra i due è reale, quindi non combatterla. Il crepuscolo porta il blu al blu notte e aggiunge magenta e corallo. L’ora blu, il breve momento dopo che il sole è tramontato, è quasi tutta blu ed è uno degli sfondi scuri più lusinghieri che esistano.
Se il tuo design punta tutto su arancioni e rosa senza alcun blu, sei passato dal cielo al tramonto, e i codici della sfumatura tramonto ti serviranno di più.
Codici per sfumature del cielo notturno
Un cielo notturno è raramente nero puro. Città, luna e il debole bagliore dell’atmosfera tengono l’orizzonte un po’ più chiaro dello zenit. Costruisci una sfumatura notturna con una cima quasi nera e un orizzonte blu notte profondo e si legge come cielo; invertila e si legge come un buco. Per stelle, chiaro di luna e molti altri blu scuri, leggi la guida sulla sfumatura del cielo notturno.
linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)Quale cielo per quale design
Adatto a
Colore del testo
Sensazione
Adatto a
Colore del testo
Adatto a
Colore del testo
Sensazione
Adatto a
Colore del testo
Sensazione
Adatto a
Colore del testo
Sensazione
Adatto a
Colore del testo
Quest’ultimo punto conta più sui cieli che sulla maggior parte delle sfumature, perché un cielo passa dallo scuro al chiaro per natura. Metti le parole dove il cielo è più calmo e scegli l’inchiostro per quell’area, non per la sfumatura nel suo insieme. Testo su una sfumatura approfondisce. In Gradiently è tutto gestito per te: un Mark tiene la sua regione più calma dietro le parole, e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla palette del Mark stesso.
Una storia per una lezione mattutina. Il titolo sta in testo chiaro nel cielo alto e calmo, e i dettagli più in basso dove la luce è più morbida.
Sfumature di cielo per ogni formato
I formati alti si adattano perfettamente ai cieli: una storia o un pin possono mostrare l’intera salita dall’orizzonte allo zenit. I formati larghi la schiacciano, quindi tieni i colori dell’orizzonte nel terzo inferiore e lascia che il cielo alto riempia il resto. È una disposizione diversa per ogni dimensione, ed è per questo che ritagliare un’unica immagine su più formati di solito fa perdere l’orizzonte.
Storia 1080×1920
1080 × 1920
Pin per Pinterest 1000×1500
1000 × 1500
Hero del sito 1920×1080
1920 × 1080
Intestazione X 1500×500
1500 × 500
Una sfumatura di cielo in CSS per ogni ora del giorno
In un sito bastano tre proprietà personalizzate per descrivere qualsiasi cielo. Cambia una classe e l’intera sezione cambia ora, comodo per un hero che segue l’orario locale del visitatore o per una pagina che si scurisce mentre procede una storia.
.sky {
min-height: 100vh;
background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}
.sky--dawn { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }Per angoli, posizioni dei punti e alternative, vedi la sfumatura lineare in CSS.
Le domande più frequenti
Quali colori formano una sfumatura di cielo?
Un cielo diurno va da un blu saturo come #1f6fd1 in alto a un blu pallido come #dceefb all’orizzonte. Alba e crepuscolo aggiungono rosa, pesca, magenta o corallo solo vicino al fondo.
In che direzione deve andare una sfumatura di cielo?
Dall’alto verso il basso, con il colore più scuro in alto. In CSS è linear-gradient(180deg, alto, basso).
Come faccio a far sembrare un’alba diversa da un tramonto?
Nel design l’alba di solito si legge più morbida e fredda, con lilla e pesca e la fascia calda bassa e sottile. I tramonti tendono a essere disegnati più saturi, con arancione e magenta più forti che salgono più in alto.
Quale colore di testo funziona su una sfumatura azzurro cielo?
Blu notte scuro o carbone si leggono bene sui cieli di mezzogiorno e vicino all’orizzonte dell’alba. Usa il bianco su crepuscolo, ora blu e notte e in alto su un cielo d’alba, e controlla il contrasto dove stanno davvero le parole.
Perché la mia sfumatura del cielo notturno sembra a righe?
Le sfumature molto scure hanno pochi gradini di colore, quindi gli schermi mostrano bande. Aggiungi uno strato leggero di grana ed esporta in PNG invece che in JPEG molto compresso.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo