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

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

Um pôr do sol que nunca termina, uma grade correndo até o horizonte, letras cromadas e um céu da cor de um hematoma. Esta é a paleta por trás de tudo isso, com códigos e degradês para usar hoje.

## The short version

- As cores synthwave giram em torno de rosa-choque, ciano elétrico, laranja de pôr do sol e violeta sobre um céu índigo profundo ou quase preto.
- O degradê synthwave típico vai do amarelo ao laranja, ao rosa e ao violeta, como um sol afundando no horizonte.
- O synthwave, também chamado de retrowave ou outrun, bebe em cartazes de filmes, fliperamas e anúncios de carros dos anos 1980, vistos pela nostalgia de épocas posteriores.
- O fundo de céu noturno é o que mais importa: sem uma base índigo escura, as cores neon perdem o brilho e ficam chapadas.
- Mantenha o texto em tinta clara e sólida sobre a parte mais escura do design, em vez de cercá-lo de brilho, para que continue nítido em tamanhos pequenos.

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

- Meia-noite: #0b0221
- Céu índigo: #241047
- Bruma violeta: #6a1b9a
- Rosa-choque: #ff2a6d
- Laranja de pôr do sol: #ff8a3d
- Amarelo-sol: #ffd23f
- Ciano elétrico: #05d9e8
- Branco cromado: #d1f7ff

Três escuros para o céu, três quentes para o sol, um neon frio e um realce cromado. A maioria dos designs synthwave usa no máximo cinco deles.

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 listrado: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Da noite ao horizonte: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Do ciano ao rosa: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Preenchimento de letra cromada: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Brilho no horizonte: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Fundo de noite liso: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

O preenchimento cromado tem uma quebra seca no meio, que é o que o faz parecer metal polido refletindo um horizonte.

> **Evite o cinza onde o rosa encontra o ciano** Rosa e ciano ficam bem distantes no círculo de cores, então uma mistura direta entre eles cai num lilás sem graça. Passe a mistura pelo violeta, como no degradê do ciano ao rosa acima, e ela continua viva. [Degradês barrentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica o motivo.

## 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.

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

Um céu noturno, um sol de pôr do sol listrado na metade inferior e uma grade ciano inclinada em perspectiva. Coloque o sol na linha do horizonte, entre o céu e a grade.

Para mais sobre listras e grades, veja [degradês CSS repetidos](https://gradiently.design/pt-br/guide/css-repeating-gradient). Se você animar a grade rolando em direção a quem olha, respeite quem pediu menos movimento ao dispositivo, como em [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).

## 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.

| Visual | Fundo | Cores-chave | Clima |
| --- | --- | --- | --- |
| Synthwave | Noite índigo profunda | Quentes de pôr do sol, grade ciano, cromado | Dirigir à noite, heroico, nostálgico |
| Vaporwave | Pastel ou azul-petróleo suave | Lilás, menta, rosa-salmão | Irônico, sonhador, shopping center |
| Cyberpunk | Quase preto, ruas molhadas | Amarelo ácido, verde tóxico, magenta | Sujo, urbano, distópico |

O synthwave é o mais quente e mais romântico dos três. Leia [cores vaporwave](https://gradiently.design/pt-br/guide/vaporwave-colors) e [paletas de cores cyberpunk](https://gradiently.design/pt-br/guide/cyberpunk-colors) para os outros.

## 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.

| Combinação | Cores | Melhor para |
| --- | --- | --- |
| Pôr do sol clássico | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Capas de álbum, cartazes de eventos, tudo que é heroico |
| Neon frio | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tecnologia, games, conteúdo noturno mais calmo |
| Entardecer violeta | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcasts, playlists, feeds de marca mais suaves |

Cada combinação mantém um fundo escuro e não acrescenta mais que três cores por cima.

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](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds), 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.

Capa quadrada de podcast intitulada Night Drive Radio, em texto claro sobre um fundo synthwave de violeta escuro e rosa

Uma capa de podcast quadrada: texto claro e sólido sobre o céu escuro, com a cor mantida nas bordas.

Story vertical anunciando um novo single em texto claro, no alto de um céu synthwave escuro, com cor quente perto da base

A mesma paleta num story, com o quente do pôr do sol embaixo e as palavras no alto, no escuro.

- 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](https://gradiently.design/pt-br/guide/80s-aesthetic).

## FAQ

### Quais cores são usadas no synthwave?

Rosa-choque, ciano elétrico, laranja de pôr do sol, amarelo-sol e violeta, sobre um céu índigo profundo ou quase preto, com realces em branco cromado.

### O que é o degradê synthwave?

Um pôr do sol que vai do amarelo ao laranja, ao rosa e ao violeta. Em CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Synthwave é o mesmo que retrowave ou outrun?

Os nomes são usados quase como sinônimos. O outrun costuma se referir ao lado de dirigir e dos carros esportivos do visual, mas a paleta é a mesma.

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

O synthwave usa neons saturados sobre um céu noturno escuro. O vaporwave usa pastéis mais suaves, como lilás, menta e salmão, sobre fundos claros ou azul-petróleo.