Gradientes pôr do sol: paletas de laranja, coral e crepúsculo

Um gradiente pôr do sol mistura cores quentes, dourado, laranja e coral, com rosa, violeta e um azul profundo de fim de tarde. É um dos gradientes mais queridos do design, porque todo mundo reconhece e quase todo mundo gosta. É também um dos mais fáceis de errar. O segredo é seguir a ordem que o céu realmente usa: quente e brilhante no horizonte, esfriando por rosa e violeta conforme você olha para cima. Pule essas cores do meio e o gradiente vira cinza.

A ordem natural das cores do pôr do sol

Quando o sol está baixo, a luz atravessa muito mais atmosfera para chegar até você. No caminho, o ar espalha a luz azul para fora do feixe direto, então a luz perto do sol chega amarela, laranja e vermelha. Mais alto no céu, longe do sol, sobra mais azul. O resultado é uma faixa de cores empilhadas do horizonte para cima.

Paletas de gradiente pôr do sol, com códigos

Estas dez paletas seguem a ordem do céu, de cima para baixo. Algumas usam a gama inteira; outras pegam só o lado quente ou só o crepúsculo.

O synthwave é o primo estilizado e neon do original; cores vaporwave e gradientes retrô levam essa direção mais longe.

Por que gradientes pôr do sol ficam turvos e como corrigir

Há dois erros clássicos. O primeiro é unir azul e laranja diretamente. Eles são quase opostos no círculo cromático, e uma mistura direta entre os dois dá cinza no meio. O céu nunca faz isso, porque passa por violeta e rosa. O segundo é esmaecer o laranja para o preto em busca de um clima mais escuro. Laranja escuro é marrom, então o gradiente parece ferrugem ou lama, e não fim de tarde.

Se você quer menos paradas, misturar em OKLCH ajuda: as cores continuam saturadas no meio da transição. Veja gradientes OKLCH em CSS e, para a teoria, gradientes turvos.

Onde os gradientes pôr do sol funcionam

O pôr do sol carrega um sentimento claro: o fim do dia, calor, um pouco de nostalgia. Isso o torna natural para alguns trabalhos e estranho para outros. Um pôr do sol vivo, com a gama completa, combina com eventos de verão, viagens, música e hotelaria. Uma versão crepuscular, quase toda violeta, combina com lançamentos noturnos, podcasts e tudo o que é reflexivo. Uma versão só quente, de dourado a coral, combina com comida, bebida e momentos de promoção.

• Pôsteres de eventos e convites: as cores dizem noite antes da data.
• Viagens e hotelaria: a hora dourada é a luz mais fotografada que existe, e as pessoas a reconhecem.
• Capas de música e playlists: paletas de crepúsculo são cinematográficas e um pouco melancólicas.
• Campanhas sazonais: um pôr do sol que esfria ao longo do outono marca a estação sem uma arte nova.

Onde eles se encaixam menos: finanças sérias, saúde e tudo o que deve parecer neutro. O calor passa a ideia de lazer. As cores do pôr do sol também ficam firmes no lado quente do círculo; cores quentes e frias explica como a temperatura muda o clima de um design.

Como criar seu próprio gradiente pôr do sol

1. 1

   Escolha quanto do céu você quer

   A gama inteira para drama, só o lado quente para energia ou só o crepúsculo para calma.

2. 2

   Coloque o quente embaixo

   Dourado e laranja ficam perto do horizonte. Pores do sol de cabeça para baixo podem funcionar, mas parecem estilizados.

3. 3

   Nunca pule um vizinho

   Entre azul e laranja, inclua violeta e rosa. Entre laranja e escuro, inclua ameixa ou índigo.

4. 4

   Dê menos espaço à faixa quente

   Nos céus reais, as cores mais brilhantes ficam coladas no horizonte. Mantê-las no quarto inferior deixa o gradiente natural.

5. 5

   Adicione grão

   Céus longos e lisos formam faixas com facilidade. Uma camada fina de ruído mantém a transição suave depois da compressão.

Texto sobre um gradiente pôr do sol

O topo de um gradiente pôr do sol é escuro e frio, perfeito para texto branco. A base é clara e quente, perfeita para texto escuro ou para nada. O meio, onde o rosa encontra o laranja, é o lugar mais difícil para os dois. Coloque os títulos no alto e os detalhes embaixo, ou mantenha as palavras em uma única faixa 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;
}

Para mais paletas de céu e paisagem, veja paletas de cores da natureza e, para versões puxadas para o rosa, gradientes rosa.