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 o rosa, o violeta e um azul profundo de fim de tarde. É um dos gradientes mais queridos do design, porque toda a gente o reconhece e quase toda a gente gosta dele. É também um dos mais fáceis de errar. O segredo é seguir a ordem que o céu realmente usa: quente e luminoso no horizonte, a arrefecer pelo rosa e pelo violeta à medida que olhas para cima. Salta essas cores do meio e o gradiente fica cinzento.

A ordem natural das cores do pôr do sol

Quando o sol está baixo, a sua luz atravessa muito mais atmosfera para chegar a ti. Pelo caminho, o ar dispersa a luz azul para fora do feixe direto, por isso a luz perto do sol chega amarela, laranja e vermelha. Mais alto no céu, longe do sol, resta 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 todas a ordem do céu, de cima para baixo. Algumas usam a gama inteira; outras ficam só com a ponta quente ou só com o crepúsculo.

O synthwave é o primo estilizado e néon do original; cores vaporwave e gradientes retro levam essa direção mais longe.

Porque é que os gradientes pôr do sol ficam baços e como os corrigir

Há dois erros clássicos. O primeiro é juntar diretamente o azul e o laranja. São quase opostos no círculo cromático, e uma mistura direta entre eles dá em média cinzento no meio. O céu nunca faz isto, porque passa pelo violeta e pelo rosa. O segundo é esbater o laranja para o preto à procura de um ambiente mais escuro. O laranja escuro é castanho, por isso o gradiente lê-se como ferrugem ou lama e não como fim de tarde.

Se quiseres menos paragens, misturar em OKLCH ajuda: mantém as cores saturadas a meio da mistura. Vê gradientes OKLCH em CSS e, para a teoria, gradientes baços.

Onde funcionam os gradientes pôr do sol

Os pores do sol trazem um sentimento claro: o fim do dia, calor, um pouco de nostalgia. Isso torna-os naturais para alguns trabalhos e estranhos para outros. Um pôr do sol luminoso, de gama completa, fica bem a eventos de verão, viagens, música e hotelaria. Uma versão crepuscular, sobretudo violeta, fica bem a lançamentos ao fim do dia, podcasts e tudo o que seja reflexivo. Uma versão só de quentes, do dourado ao coral, fica bem a comida, bebida e momentos de saldos.

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

Onde encaixam pior: finanças sérias, saúde e tudo o que deva parecer neutro. O calor lê-se como lazer. As cores do pôr do sol também ficam firmemente no lado quente do círculo; cores quentes e frias explica como a temperatura muda o ambiente de um design.

Como criar o teu próprio gradiente pôr do sol

1. 1

   Escolhe quanto do céu queres

   A gama inteira para dramatismo, só a ponta quente para energia ou só o crepúsculo para calma.

2. 2

   Põe os quentes em baixo

   O dourado e o laranja pertencem junto ao horizonte. Os pores do sol invertidos podem funcionar, mas leem-se como estilizados.

3. 3

   Nunca saltes um vizinho

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

4. 4

   Dá menos espaço à faixa quente

   Nos céus reais, as cores mais luminosas ficam coladas ao horizonte. Mantê-las no quarto inferior faz o gradiente parecer natural.

5. 5

   Junta grão

   Os céus longos e suaves ganham bandas com facilidade. Uma camada fina de ruído mantém a mistura 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. O fundo é luminoso e quente, perfeito para texto escuro ou para nada. O meio, onde o rosa encontra o laranja, é o sítio mais difícil para qualquer um deles. Põe os títulos em cima e os pormenores em baixo, ou mantém as palavras numa só 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 de paisagem, vê paletas de cores da natureza e, para versões dominadas pelo rosa, gradientes rosa.