Cores synthwave: códigos hex e degradês para noites de neon

As cores synthwave são rosa-choque, ciano elétrico, laranja de pôr do sol e violeta profundo, todas sobre um céu noturno índigo. O visual vem de uma cena de música e arte que reimagina os anos 1980: um sol listrado no horizonte, um piso de grade brilhante, letras cromadas e silhuetas de palmeiras. As cores são vivas, mas só funcionam porque o fundo é muito escuro. Comece pela noite e só depois acrescente o neon.

A paleta de cores synthwave com códigos hex

Pense na paleta em duas metades. A metade quente (amarelo, laranja, rosa) pertence ao sol e ao horizonte. A metade fria (ciano e branco cromado) pertence à grade, às linhas e às letras. Manter cada metade no seu lugar dá estrutura ao visual e impede que ele vire uma confusão de neon.

Degradês synthwave para copiar

O pôr do sol é o coração do synthwave. Ele sempre vai do quente ao frio, de cima para baixo do sol, ou do horizonte para o céu. Abaixo estão os degradês que aparecem sempre, cada um escrito como um único valor CSS.

Sol e grade synthwave em CSS

As duas formas clássicas são fáceis de montar com degradês em camadas. O sol é um círculo preenchido com o degradê do pôr do sol e cortado por listras horizontais. A grade são dois degradês repetidos, um horizontal e um vertical, inclinados para trás com uma transformação de perspectiva.

.sky {
  background: linear-gradient(180deg, #0b0221 0%, #241047 55%, #6a1b9a 100%);
}

.sun {
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23f 0%, #ff8a3d 40%, #ff2a6d 75%, #b3138f 100%);
  /* solid top half, plus stripes: mask layers add together */
  mask-image:
    linear-gradient(180deg, #000 0 55%, transparent 55%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
}

.grid {
  height: 40vh;
  background-color: #0b0221;
  background-image:
    repeating-linear-gradient(0deg, #05d9e8 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, #05d9e8 0 2px, transparent 2px 48px);
  transform: perspective(300px) rotateX(60deg);
  transform-origin: top;
}

Para mais sobre listras e grades, veja degradês CSS repetidos. Se você animar a grade rolando em direção a quem olha, respeite quem pediu menos movimento ao dispositivo, como em movimento reduzido.

Synthwave, vaporwave e cyberpunk comparados

Os três se confundem porque compartilham o neon. As diferenças estão no fundo e no clima, e importam na hora de escolher uma paleta.

Três combinações de cores synthwave para climas diferentes

A paleta completa é muita coisa. A maior parte do bom trabalho synthwave escolhe uma combinação mais estreita e se compromete com ela. Estas três cobrem os climas que as pessoas costumam querer, e cada uma é montada com os códigos acima.

Se você está montando um feed inteiro, escolha uma combinação para os posts do dia a dia e reserve o pôr do sol completo para grandes momentos, como um lançamento. Um feed em que todo post é um pôr do sol ardente logo deixa de parecer especial, e o pôr do sol perde a força quando você finalmente precisa dele. O mesmo raciocínio aparece em fundos de degradê escuro, que mostra como manter um fundo noturno rico sem que ele fique chapado ou com faixas.

Como usar cores synthwave nos seus designs

O synthwave combina com lançamentos de música, transmissões de games, festas noturnas, podcasts sobre cinema e tudo que quer parecer uma viagem de carro de madrugada. A armadilha é a legibilidade: muitos designers cercam o texto com um brilho neon, que borra em tamanhos pequenos e em celulares. Em vez disso, escreva as palavras em branco cromado ou amarelo-sol sólido sobre a parte mais escura do céu. A cor ao redor faz o brilho.

• Mantenha o sol ou a área quente mais brilhante longe do título.
• Use ciano para linhas finas e pequenos detalhes, não para grandes preenchimentos.
• Acrescente granulado fino para o céu escuro não formar faixas na exportação.
• Escolha uma fonte de destaque com ar cromado ou itálico e use-a em tudo.

Os Marks do Gradiently se comportam como o synthwave precisa: a parte mais calma e de melhor contraste do fundo vai para trás do seu texto, e a Tinta automática escolhe texto claro ou escuro linha a linha, então um título nunca briga com o sol. Para a década que tudo isso imita, veja a estética dos anos 80.