Cores synthwave: códigos hex e gradientes para noites néon

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 musical e artística que reimagina os anos 80: um sol às riscas no horizonte, um chão de grelha a brilhar, letras cromadas e silhuetas de palmeiras. As cores são vivas, mas só funcionam porque a base é muito escura. Começa pela noite e depois acrescenta o néon.

A paleta de cores synthwave com códigos hex

Pensa 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 à grelha, às linhas e às letras. Manter cada metade no seu sítio dá estrutura ao visual e impede que se transforme numa confusão de néon.

Gradientes synthwave para copiar

O pôr do sol é o coração do synthwave. Vai sempre do quente para o frio, de cima para baixo no sol ou do horizonte para o céu. Abaixo estão os gradientes que aparecem vezes sem conta, cada um escrito como um único valor CSS.

Sol e grelha synthwave em CSS

As duas formas clássicas constroem-se facilmente com gradientes em camadas. O sol é um círculo preenchido com o gradiente do pôr do sol e cortado por riscas horizontais. A grelha são dois gradientes repetidos, um horizontal e um vertical, inclinados para trás com uma transformação de perspetiva.

.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 saber mais sobre riscas e grelhas, vê gradientes CSS repetidos. Se animares a grelha a deslizar na direção de quem vê, respeita quem pediu ao dispositivo menos movimento, como se explica em movimento reduzido.

Synthwave, vaporwave e cyberpunk comparados

Estes três confundem-se porque partilham o néon. As diferenças estão na base e no ambiente, e contam quando escolhes uma paleta.

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

A paleta completa é muita coisa. A maioria dos bons trabalhos synthwave escolhe uma combinação mais estreita e assume-a. Estas três cobrem os ambientes que as pessoas costumam querer, e cada uma é feita com os códigos acima.

Se estás a montar um feed inteiro, escolhe uma combinação para os posts habituais e guarda o pôr do sol completo para os grandes momentos, como um lançamento. Um feed onde todos os posts são um pôr do sol em chamas deixa depressa de ser especial, e o pôr do sol perde força quando finalmente precisas dele. A mesma ideia aparece em fundos de gradiente escuros, que explica como manter uma base noturna rica sem a deixar plana ou com banding.

Usar cores synthwave nos teus designs

O synthwave serve lançamentos musicais, streams de jogos, noites de clube, podcasts sobre cinema e tudo o que queira parecer uma viagem noturna de carro. A armadilha é a legibilidade: os designers costumam rodear o texto de um brilho néon, que se esborrata em tamanhos pequenos e nos telemóveis. Escreve antes as palavras em branco cromado ou amarelo sol sólido na parte mais escura do céu. A cor à volta é que faz o brilho.

• Mantém o sol ou a zona quente mais viva longe do título.
• Usa o ciano para linhas finas e pequenos detalhes, não para grandes preenchimentos.
• Acrescenta grão fino para o céu escuro não ter banding na exportação.
• Escolhe um tipo de letra de destaque com ar cromado ou itálico e usa-o em todo o lado.

Os Marks do Gradiently comportam-se como o synthwave precisa: a parte mais calma e de melhor contraste do fundo move-se para trás das tuas palavras, e a tinta automática escolhe letra clara ou escura linha a linha, por isso um título nunca luta com o sol. Para a década que tudo isto imita, vê a estética dos anos 80.