Cores vaporwave e paletas synthwave, com códigos hex

As cores vaporwave são pastéis suaves e luminosos: rosa-choque, ciano, menta, lilás e um amarelo-limão claro, geralmente sobre céus pálidos ou desbotados. O primo mais barulhento, o synthwave, pega o mesmo rosa e o mesmo ciano, aumenta tudo até o neon e coloca sobre uma noite quase preta, com um sol listrado afundando em uma grade. Abaixo estão as duas paletas com códigos hex, gradientes para copiar, o CSS da cena de pôr do sol e como usar o clima sem cair na paródia.

Um pouco de contexto ajuda a usar essas cores de propósito. O vaporwave nasceu na internet no começo dos anos 2010, como um estilo de música e imagem feito de uma cultura de consumo meio esquecida: computação gráfica antiga, a calma dos shoppings, janelas de sistemas operacionais velhos e estátuas clássicas. O synthwave se inspira no visual dos filmes e fliperamas dos anos 1980: passeios noturnos de carro, letreiros neon e grades de laser. Para a história mais ampla da década, veja gradientes retrô.

A paleta de cores vaporwave clássica

Um conjunto de cinco cores aparece de novo e de novo quando as pessoas descrevem o vaporwave, e ele merece esse lugar: todas as cores são claras, saturadas e um pouco sintéticas, como uma tela vista através de uma névoa. Use como ponto de partida e depois decida quais uma ou duas cores lideram.

Rosa e ciano são o coração da paleta: uma cor quente e uma fria com brilho parecido, e é por isso que ficam juntas sem que uma engula a outra. O lilás faz a ponte entre elas, então uma transição de rosa para lilás para ciano nunca passa pelo cinza. Menta e limão ficam melhor em pequenas doses, para um preço, um adesivo ou uma única palavra.

Cores synthwave: a versão noturna

O synthwave, às vezes chamado de retrowave, mantém os matizes mas muda a luz. O fundo é quase preto com um toque de violeta, o horizonte brilha em magenta e o sol vai do amarelo no alto ao rosa e roxo embaixo. Se o vaporwave parece uma tarde enevoada, o synthwave é meia-noite em uma estrada vazia.

Gradientes vaporwave e synthwave para copiar

Os gradientes são onde esse estilo mora, porque todo motivo é, no fundo, uma fonte de luz: um sol, um horizonte, um letreiro brilhante. Cada transição abaixo fica de um lado só do círculo cromático ou passa pelo lilás, então nenhuma fica lamacenta no meio. Se alguma ficar na sua tela, gradientes lamacentos explica por quê e como corrigir.

Transições neon como estas mostram banding com facilidade em telas grandes, porque longos trechos de violeta escuro parecido deixam poucos degraus de cor. Um pouco de grão esconde os degraus e acrescenta a superfície suave e levemente gasta pela qual o estilo é conhecido. Veja gradientes granulados para o método e gradientes neon para um neon mais claro e limpo, sem o enquadramento retrô.

Como desenhar um pôr do sol synthwave com grade em CSS

A cena inteira tem três camadas: um gradiente de céu, um sol com cortes horizontais na metade de baixo e um chão de grade inclinado em perspectiva. Os cortes são uma máscara com paradas secas, e a grade são dois gradientes de linha fina repetidos no mesmo tamanho. Funciona em qualquer navegador atual.

.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  perspective: 400px;
  background: linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 240px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 40%, #ff2975 75%, #8c1eff 100%);
  /* horizontal cuts across the lower half */
  mask: linear-gradient(180deg, #000 55%, transparent 55% 59%, #000 59% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
}

.floor {
  position: absolute;
  inset: 55% -50% -40%;
  transform: rotateX(60deg);
  transform-origin: top;
  background:
    linear-gradient(#ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    linear-gradient(90deg, #ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    #0b0221;
}

Para animar, mova a posição do fundo do chão para baixo em loop, exatamente uma célula, 60px, para que a grade pareça rolar na sua direção para sempre. Mantenha o movimento lento e respeite quem pede menos movimento com prefers reduced motion.

Como usar o visual vaporwave sem cair na paródia

O estilo é tão reconhecível que uma pilha de clichês dele vira piada. Tudo bem para um meme; é um problema para uma marca, uma capa de disco ou um pôster que você quer que seja levado a sério. A solução é contenção: pegue emprestada a cor e um motivo, e deixe todo o resto moderno.

Onde as cores vaporwave funcionam melhor

A paleta combina com tudo que é noturno, musical ou divertidamente nostálgico: capas de playlist em 1080×1080, capas de podcast em 3000×3000, pôsteres de festa e show, telas offline da Twitch em 1920×1080 e lançamentos de produto com um toque retrô. Convence menos em banco, saúde ou qualquer coisa que precise transmitir uma confiança discreta. Para uma live, fundos para stream trata do layout; para capas, veja arte de capa de podcast.

Se você quer a noite synthwave sem montar tudo do zero, pesquise no Mercado do Gradiently com palavras de cor como “magenta neon” ou “violeta profundo” e crie com qualquer Mark que encontrar, de graça. Para o visual pastel parecido do fim dos anos 90 e começo dos 2000, leia sobre a estética Y2K.