# Cores vaporwave e paletas synthwave, com códigos hex

[Canonical HTML page](https://gradiently.design/pt-pt/guide/vaporwave-colors)

Rosa pastel, ciano e lilás no vaporwave, um sol brilhante sobre uma grelha preta no synthwave. Cada paleta aqui vem com códigos que podes copiar e com o critério para a usar bem.

## The short version

- As cores clássicas do vaporwave são o rosa choque #ff71ce, o ciano #01cdfe, a menta #05ffa1, o lilás #b967ff e o amarelo pálido #fffb96.
- O vaporwave tende para o pastel e para a luz do dia, enquanto o synthwave põe magenta e ciano saturados e um sol de amarelo a roxo contra uma noite quase preta.
- O rosa e o ciano néon são claros demais para texto branco: texto escuro sobre a cor néon, ou texto néon sobre um fundo escuro, lê-se muito melhor.
- O visual funciona melhor quando escolhes um só motivo, como o sol, a grelha ou as letras cromadas, em vez de empilhar todos os clichés de uma vez.
- Um grão suave e um néon ligeiramente atenuado fazem as paletas vaporwave e synthwave parecer desenhadas em vez de copiadas de um meme.

As **cores vaporwave** são pastéis suaves e luminosos: rosa choque, ciano, menta, lilás e um amarelo limão pálido, normalmente sobre céus pálidos ou desbotados. O primo mais barulhento, o synthwave, pega no mesmo rosa e ciano, leva-os até ao néon e põe-nos numa noite quase preta com um sol às riscas a afundar-se numa grelha. Abaixo estão as duas paletas com códigos hex, gradientes para copiar, o CSS da cena do pôr do sol e como usar o ambiente sem que resvale para a paródia.

Um pouco de contexto ajuda a usá-las com intenção. O vaporwave cresceu na internet no início da década de 2010 como um estilo de música e imagem feito de cultura de consumo meio recordada: gráficos de computador antigos, a calma dos centros comerciais, janelas de sistemas operativos antigos e estátuas clássicas. O synthwave inspira-se no visual dos filmes e jogos de arcada dos anos 80: viagens noturnas de carro, letreiros de néon e grelhas de laser. Para a história mais alargada da década, vê [gradientes retro](https://gradiently.design/pt-pt/guide/retro-gradients).

## A paleta de cores vaporwave clássica

Há um conjunto de cinco cores que aparece vezes sem conta quando se descreve o vaporwave, e merece o lugar: todas as cores são claras, saturadas e ligeiramente sintéticas, como um ecrã visto através de neblina. Usa-o como ponto de partida e depois decide que uma ou duas cores lideram.

- Rosa choque: #ff71ce
- Ciano: #01cdfe
- Menta: #05ffa1
- Lilás: #b967ff
- Limão pálido: #fffb96

A paleta vaporwave clássica. O rosa e o ciano fazem a maior parte do trabalho; a menta e o limão são acentos.

O rosa e o ciano são o coração do estilo: uma cor quente e uma fria com um brilho semelhante, e é por isso que ficam juntas sem que uma engula a outra. O lilás faz a ponte entre elas, por isso uma mistura de rosa a lilás a ciano nunca passa pelo cinzento. A menta e o limão ficam melhor em pequeno, num preço, num autocolante ou numa única palavra.

## Cores synthwave: a versão noturna

O synthwave, por vezes chamado retrowave, mantém os tons mas muda a luz. O fundo é quase preto com um reflexo violeta, o horizonte brilha em magenta e o sol vai do amarelo no topo ao rosa e ao roxo em baixo. Se o vaporwave parece uma tarde enevoada, o synthwave é meia-noite numa estrada vazia.

- Noite: #0b0221
- Violeta profundo: #2d0b59
- Magenta néon: #ff2a6d
- Ciano laser: #05d9e8
- Laranja pôr do sol: #ff901f
- Amarelo sol: #ffd319

Uma paleta synthwave: dois fundos escuros, dois néons e as duas cores quentes do sol.

### Vaporwave

- Pastel, enevoado, luz do dia
- Fundos pálidos: céu rosa, lilás, branco
- Rosa e ciano suaves, pouco contraste
- Motivos: estátuas, palmeiras, janelas de computador antigas
- Parece nostálgico, calmo e um pouco irónico

### Synthwave

- Néon, luminoso, noite
- Fundo violeta quase preto
- Magenta e ciano saturados, muito contraste
- Motivos: sol às riscas, grelha de laser, letras cromadas
- Parece cinematográfico, rápido e dramático

## Gradientes vaporwave e synthwave para copiar

Os gradientes são onde este estilo vive, porque cada motivo é na verdade uma fonte de luz: um sol, um horizonte, um letreiro luminoso. Cada mistura abaixo fica de um só lado do círculo cromático ou passa pelo lilás, por isso nenhuma fica turva no meio. Se alguma ficar no teu ecrã, [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica porquê e como resolver.

- Sol synthwave: `linear-gradient(180deg, #ffd319 0%, #ff901f 35%, #ff2975 70%, #8c1eff 100%)`
- Horizonte noturno: `linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 85%, #ff6a3d 100%)`
- Brilho do horizonte: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #7a04eb 40%, #0b0221 75%)`
- Vapor pastel: `linear-gradient(135deg, #ff71ce 0%, #b967ff 50%, #01cdfe 100%)`
- Fonte do centro comercial: `linear-gradient(135deg, #01cdfe 0%, #05ffa1 100%)`
- Crepúsculo pastel: `linear-gradient(180deg, #fbc2eb 0%, #a6c1ee 100%)`
- Letras cromadas: `linear-gradient(180deg, #e0f7ff 0%, #6fb7ff 48%, #1b1f5e 50%, #ff71ce 100%)`
- Crepúsculo néon: `linear-gradient(180deg, #120458 0%, #7a04eb 60%, #ff124f 100%)`

Oito gradientes para o estilo. Os três primeiros são noites synthwave, os três seguintes dias vaporwave, e as Letras cromadas usam uma paragem nítida entre 48 e 50% para imitar um horizonte refletido.

Misturas néon como estas formam faixas com facilidade em ecrãs grandes, porque longos troços de violeta escuro semelhante deixam poucos degraus de cor. Um pouco de grão esconde os degraus e acrescenta a superfície suave e ligeiramente degradada pela qual o estilo é conhecido. Vê [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) para o método, e [gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients) para um néon mais vivo e limpo, sem o enquadramento retro.

## Como desenhar um pôr do sol synthwave e uma grelha 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 em grelha inclinado em perspetiva. Os cortes são uma máscara com paragens nítidas, e a grelha são dois gradientes de linhas finas repetidos com o mesmo tamanho. Funciona em qualquer navegador atual.

```css
.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;
}
```

Marcação: uma `.scene` que contém um `.sun` e um `.floor`. O chão começa no horizonte e tapa a parte de baixo do sol, e é isso que o faz parecer estar a pôr-se.

Para o animar, move a posição de fundo do chão para baixo em ciclo, exatamente uma célula, 60px, para que a grelha pareça rolar na tua direção para sempre. Mantém-na lenta e respeita quem pede menos movimento com [prefers reduced motion](https://gradiently.design/pt-pt/guide/reduced-motion).

## Usar o visual vaporwave sem cair na paródia

O estilo é tão reconhecível que um amontoado dos seus clichés se lê como piada. Num meme não há problema; numa marca, numa capa de disco ou num cartaz que queres que levem a sério, há. A solução é contenção: pede emprestada a cor e um motivo, e deixa tudo o resto ser moderno.

### Evita

- Estátua, palmeira, grelha, sol e cromado no mesmo enquadramento
- #ff00ff e #00ffff puros em grandes áreas
- Texto branco sobre rosa choque ou ciano
- Texto muito espaçado numa língua que não sabes ler
- Ruído de cassete pesado que esconde as palavras

### Faz

- Um motivo, usado com confiança
- Néon ligeiramente atenuado, como nas paletas acima
- Tinta escura sobre néon, ou néon sobre um fundo escuro
- Um tipo de letra limpo e moderno
- Grão fino para textura, nunca à custa da leitura

| Texto | Fundo | Contraste | Veredicto |
| --- | --- | --- | --- |
| Branco #ffffff | Rosa choque #ff71ce | 2.5:1 | Falha para texto corrido |
| Branco #ffffff | Ciano #01cdfe | 1.9:1 | Falha |
| Noite #0b0221 | Rosa choque #ff71ce | 8.1:1 | Passa com folga |
| Ciano #01cdfe | Noite #0b0221 | 10.7:1 | Passa com folga |
| Limão pálido #fffb96 | Violeta profundo #2d0b59 | 15:1 | Excelente |

Rácios de contraste para combinações comuns. As cores néon são claras, por isso pedem texto escuro e não branco. Mais em [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Uma capa de podcast quadrada com o título Sessões de Estrada Noturna sobre um fundo escuro e luminoso

Uma capa de podcast pede emprestada a noite e uma cor, não o kit inteiro.

Uma story vertical a anunciar Noites Néon com a hora e os estilos de música

Uma story de evento: uma linha forte, detalhes claros e o ambiente levado pelo fundo.

## Onde as cores vaporwave funcionam melhor

A paleta serve tudo o que seja noturno, musical ou nostálgico com humor: capas de playlists em 1080×1080, capas de podcasts em 3000×3000, cartazes de discotecas e concertos, ecrãs offline da Twitch em 1920×1080 e lançamentos de produtos com um toque retro. É mais difícil de defender para banca, saúde ou tudo o que precise de transmitir confiança discreta. Para uma transmissão, [fundos para streaming](https://gradiently.design/pt-pt/guide/stream-overlay-background) trata do layout; para capas, vê [capas de podcast](https://gradiently.design/pt-pt/guide/podcast-cover-art).

Se queres a noite synthwave sem a construir do zero, pesquisa no [Mercado](/market) da Gradiently com palavras de cor como “magenta néon” ou “violeta profundo” e cria com qualquer Mark que encontres, gratuitamente. Para o visual pastel muito próximo do fim dos anos 90 e início dos anos 2000, lê [estética Y2K](https://gradiently.design/pt-pt/guide/y2k-aesthetic).

## FAQ

### Quais são as principais cores vaporwave?

Rosa choque #ff71ce, ciano #01cdfe, menta #05ffa1, lilás #b967ff e limão pálido #fffb96. O rosa e o ciano lideram; as outras são acentos.

### Qual é a diferença entre as cores vaporwave e synthwave?

O vaporwave usa pastéis suaves sobre fundos pálidos e enevoados. O synthwave usa magenta e ciano néon saturados com um sol de amarelo a roxo numa noite violeta quase preta.

### Que cor de texto funciona sobre um fundo vaporwave?

Texto escuro sobre rosa ou ciano néon, ou texto néon e limão pálido sobre um fundo violeta escuro. Branco sobre rosa choque mede cerca de 2.5:1, o que é baixo demais para texto corrido.

### Como faço um sol synthwave em CSS?

Dá a um círculo um gradiente vertical de #ffd319 por #ff901f e #ff2975 até #8c1eff, e depois corta riscas horizontais na metade de baixo com uma máscara feita de paragens de cor nítidas.

### Vaporwave é o mesmo que retrowave?

Não exatamente. Retrowave é outro nome para synthwave, o estilo noturno de néon inspirado nos filmes e jogos dos anos 80. O vaporwave é o estilo pastel e mais suave que cresceu na internet no início da década de 2010.