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

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

Um pôr do sol que nunca acaba, uma grelha a correr até ao horizonte, letras cromadas e um céu da cor de um hematoma. Eis a paleta por trás disto, com códigos e gradientes que podes 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 escuro ou quase preto.
- O gradiente synthwave característico vai do amarelo ao violeta, passando por laranja e rosa, como um sol a afundar-se no horizonte.
- O synthwave, também chamado retrowave ou outrun, inspira-se em cartazes de cinema, jogos de arcada e anúncios de automóveis dos anos 80, vistos através da nostalgia posterior.
- A base do céu noturno é o que mais conta: sem uma base índigo escura, as cores néon perdem o brilho e ficam planas.
- Mantém o texto em tinta clara e sólida na parte mais escura do design, em vez de o rodeares de brilho, para continuar 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 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

- Meia-noite: #0b0221
- Céu índigo: #241047
- Neblina violeta: #6a1b9a
- Rosa-choque: #ff2a6d
- Laranja 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 néon frio e um realce cromado. A maioria dos designs synthwave usa cinco destas, no máximo.

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 às riscas: `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 do horizonte: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Base noturna simples: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

O preenchimento cromado tem uma quebra seca a meio, o que lhe dá o ar de metal polido a refletir um horizonte.

> **Evita o cinzento onde o rosa encontra o ciano** O rosa e o ciano estão muito afastados no círculo cromático, por isso uma mistura direta entre eles cai num malva baço. Faz a mistura passar pelo violeta, como no gradiente do ciano ao rosa acima, e fica vivo. [Gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica porquê.

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

```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 riscado na metade inferior e uma grelha ciano inclinada em perspetiva. Põe o sol na linha do horizonte entre o céu e a grelha.

Para saber mais sobre riscas e grelhas, vê [gradientes CSS repetidos](https://gradiently.design/pt-pt/guide/css-repeating-gradient). 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](https://gradiently.design/pt-pt/guide/reduced-motion).

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

| Estilo | Base | Cores principais | Ambiente |
| --- | --- | --- | --- |
| Synthwave | Noite índigo profunda | Quentes de pôr do sol, grelha ciano, cromado | Conduzir de noite, heroico, nostálgico |
| Vaporwave | Pastel ou verde-azulado suave | Lilás, menta, rosa-salmão | Irónico, sonhador, centro comercial |
| Cyberpunk | Quase preto, ruas molhadas | Amarelo ácido, verde tóxico, magenta | Cru, urbano, distópico |

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

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

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

Cada combinação mantém uma base escura e não acrescenta mais de três cores por cima.

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

Uma capa de podcast quadrada com o título Night Drive Radio em letra clara sobre um fundo synthwave violeta escuro e rosa

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

Um story vertical a anunciar um novo single, em letra clara no alto de um céu synthwave escuro, com cor quente perto da base

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

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

## FAQ

### Que cores se usam no synthwave?

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

### O que é o gradiente synthwave?

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

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

Os nomes usam-se quase como sinónimos. O outrun refere-se muitas vezes ao lado da condução e dos carros desportivos, mas a paleta é a mesma.

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

O synthwave usa néons saturados sobre um céu noturno escuro. O vaporwave usa pastéis mais suaves, como lilás, menta e rosa-salmão, sobre bases claras ou verde-azuladas.