Gradientes de céu: códigos de aurora, meio-dia, crepúsculo e noite

Um gradiente de céu vai de uma cor mais profunda no alto até uma mais pálida no horizonte, porque é assim que a luz do dia se comporta: a luz perto do horizonte atravessa mais ar, dispersa-se mais e tende para o branco. Acerta nesta única direção e quase qualquer azul se lê como céu. Abaixo tens códigos para copiar para seis horas do dia, da primeira luz a uma noite sem lua, com notas sobre onde cada um funciona e que cor de letra assenta nele.

Como está organizado o céu verdadeiro

Olha para cima num dia limpo e o azul mesmo por cima de ti é mais rico do que o azul junto aos telhados. Ao nascer e ao pôr do sol, a luz do sol atravessa tanta atmosfera que a maior parte do azul se dispersa antes de te chegar, deixando vermelhos, laranjas e rosas em baixo no céu enquanto o zénite se mantém frio. Isso dá-te duas regras para qualquer gradiente de céu: profundo no topo, pálido em baixo, e cores quentes sempre só perto do horizonte.

Códigos de gradientes de aurora e nascer do sol

A aurora é o céu mais suave do dia. O topo ainda é índigo de noite, o meio passa a lilás e uma faixa de rosa e pêssego assenta no horizonte. Sente-se calma e cheia de esperança, e por isso serve marcas de bem-estar, rotinas matinais, anúncios de algo novo e tudo o que queira parecer delicado e não ruidoso.

Gradientes de céu limpo ao meio-dia e de dia

Um céu limpo de meio-dia é o clássico gradiente azul-céu: azul saturado no topo a esbater-se para um azul pálido, quase branco, no horizonte. Mantém o tom estável e deixa a luminosidade fazer o trabalho. Se a paragem de baixo ficar cinzenta em vez de azul pálido, o céu começa a parecer poluído. Uma tarde enevoada é a mesma ideia com menos saturação, e um dia nublado troca o azul por um cinzento frio.

Para mais azuis além do céu, do azul-marinho ao gelo, vê os códigos de gradiente azul. Se queres também a água debaixo do céu, o artigo gradiente de oceano funciona ao contrário: pálido em cima, profundo em baixo.

Códigos da hora dourada, do crepúsculo e da hora azul

O céu do fim do dia é onde os gradientes de céu ficam dramáticos. A hora dourada mantém um azul de dia no alto e um âmbar forte no horizonte, e a faixa suave acinzentada entre os dois é real, por isso não lutes contra ela. O crepúsculo faz descer o azul para azul-marinho e junta magenta e coral. A hora azul, o curto período depois de o sol se ter ido, é quase toda azul e é um dos fundos escuros mais favorecedores que existem.

Se o teu design se inclina por inteiro para laranjas e rosas sem azul nenhum, passaste do céu para o pôr do sol, e os códigos de gradiente de pôr do sol vão servir-te melhor.

Códigos de gradientes de céu noturno

Um céu noturno raramente é preto puro. As cidades, a lua e o brilho ténue da atmosfera mantêm o horizonte um toque mais claro do que o zénite. Constrói um gradiente noturno com um topo quase preto e um horizonte azul-marinho profundo e lê-se como céu; inverte-o e lê-se como um buraco. Para estrelas, luar e muitos mais azuis escuros, lê o guia de gradiente de céu noturno.

Que céu serve que design

Este último ponto importa mais nos céus do que na maioria dos gradientes, porque um céu vai do escuro ao claro por definição. Coloca as palavras onde o céu está mais calmo e escolhe a tinta para essa zona, não para o gradiente todo. Texto sobre gradiente aprofunda o tema. No Gradiently isto é tratado por ti: um Mark mantém a sua zona mais calma atrás das palavras, e a Tinta automática escolhe letra clara ou escura linha a linha a partir da paleta do próprio Mark.

Gradientes de céu para todos os formatos

Os formatos altos servem perfeitamente os céus: um story ou um pin pode mostrar toda a subida do horizonte ao zénite. Os formatos largos comprimem-na, por isso mantém as cores do horizonte no terço inferior e deixa o céu alto preencher o resto. É uma disposição diferente para cada tamanho, e é por isso que cortar uma só imagem para vários formatos costuma perder o horizonte.

Um gradiente de céu em CSS para cada hora do dia

Num site, três propriedades personalizadas bastam para descrever qualquer céu. Troca uma classe e a secção toda muda de hora, o que dá jeito para um hero que siga a hora local do visitante ou uma página que escurece à medida que uma história avança.

.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; }

Para ângulos, posições das paragens e alternativas, vê gradiente linear em CSS.