# Paleta de cores cyberpunk: neon sobre quase preto, com códigos hex

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

Chuva no concreto, letreiros em três alfabetos, uma máquina de venda zumbindo num beco. A cor cyberpunk é luz dura numa cidade escura. Aqui estão cinco paletas com códigos, e como mantê-las legíveis.

## The short version

- Uma paleta de cores cyberpunk coloca uma ou duas cores neon duras, como amarelo ácido, magenta, ciano ou verde tóxico, contra um fundo quase preto.
- O fundo no design cyberpunk raramente é preto puro: preto-azulado, preto-esverdeado ou cinza de asfalto molhado dão aos neons algo em que se apoiar.
- O cyberpunk se diferencia do synthwave por ser mais frio e mais sujo, com amarelos e verdes industriais em vez de rosas e laranjas de pôr do sol.
- Amarelo, ciano e verde sobre quase preto passam nas verificações de contraste com folga, enquanto o azul puro falha e os vermelhos ficam bem mais perto do limite.
- Usar um neon dominante e um destaque secundário por design mantém as artes cyberpunk marcantes em vez de caóticas.

Uma **paleta de cores cyberpunk** é neon sobre quase preto: amarelo ácido, magenta quente, ciano elétrico e verde tóxico, contra o preto-azulado de uma cidade à noite. O visual vem de décadas de ficção científica sobre alta tecnologia e vida à margem, então as cores parecem artificiais e um pouco perigosas. A regra que faz tudo funcionar é a contenção: um neon dominante, um destaque e muito escuro.

## As cores essenciais do cyberpunk

- Asfalto noturno: #07080d
- Preto-azulado: #141824
- Concreto molhado: #2b2f3a
- Amarelo ácido: #fcee0a
- Vermelho de alerta: #ff003c
- Letreiro magenta: #ff2bd6
- Ciano de HUD: #00f0ff
- Verde tóxico: #39ff14

Três escuros para construir a cidade, cinco neons para iluminá-la. Raramente você vai usar mais de dois neons num mesmo design.

Cada neon tem uma função. O amarelo parece industrial e urgente, como fita de advertência. O vermelho significa alerta. O magenta é vida noturna e publicidade. O ciano é interface, tela e dados. O verde é código e química. Escolha o neon cuja função combina com a sua mensagem, e a paleta começa a contar a história por você.

## Cinco paletas cyberpunk com códigos hex

| Paleta | Fundo | Neon principal | Destaque |
| --- | --- | --- | --- |
| Perigo | `#07080d` | Amarelo ácido `#fcee0a` | Ciano `#00f0ff` |
| Feira noturna | `#141824` | Magenta `#ff2bd6` | Ciano `#00f0ff` |
| Terminal | `#050b07` | Verde tóxico `#39ff14` | Menta pálido `#b8ffd0` |
| Alerta vermelho | `#0d0608` | Vermelho de alerta `#ff003c` | Amarelo ácido `#fcee0a` |
| Cromo frio | `#0b0f17` | Ciano `#00f0ff` | Aço `#9aa4b5` |

Cada paleta é um fundo, um neon principal e um destaque. Use o destaque em menos de um décimo do design.

- Perigo: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Feira noturna: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Terminal: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Alerta vermelho: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Cromo frio: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

As mesmas cinco paletas como fundos. O neon vai para uma borda ou um canto, então a maior parte da superfície continua escura o bastante para receber palavras.

## Cores cyberpunk como variáveis CSS

Para um site, um overlay de stream ou uma interface de jogo, monte a paleta como propriedades personalizadas para trocar o neon principal num lugar só. Este exemplo usa a paleta Feira noturna, com o neon reservado para bordas, links e um único elemento de foco.

```css
:root {
  --ground: #141824;
  --surface: #1e2332;
  --line: #2b2f3a;
  --text: #e6e9f0;
  --muted: #9aa4b5;
  --neon: #ff2bd6;
  --accent: #00f0ff;
}

body {
  background: var(--ground);
  color: var(--text);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--neon);
}

a {
  color: var(--accent);
}

.hero {
  background:
    linear-gradient(135deg, transparent 60%, var(--neon) 140%),
    var(--ground);
}
```

O texto corrido fica num branco suave; os neons ficam reservados para bordas, links e um único canto iluminado.

Veja [propriedades personalizadas CSS para temas](https://gradiently.design/pt-br/guide/css-custom-properties-theming) para alternar paletas, e [design em modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) para as regras gerais de construir sobre fundos escuros.

### Fotos numa paleta cyberpunk

Fotos comuns podem ser puxadas para dentro da paleta. Fotos noturnas de ruas, chuva no vidro, estacionamentos e escadarias funcionam depois de escurecidas e tingidas. Um duotone que leva as sombras para a cor do fundo e as luzes para o neon principal transforma uma foto sem graça de um ponto de ônibus em algo que pertence ao conjunto. Mantenha a tinta forte nos fundos e mais suave em rostos, onde um duotone neon completo pode ficar duro. [O efeito duotone](https://gradiently.design/pt-br/guide/duotone-effect) explica como escolher as duas cores.

## Como manter o texto cyberpunk legível

Neon sobre quase preto parece que vai ser legível, e para títulos grandes geralmente é. Os problemas começam no texto pequeno e nos neons mais escuros. Vermelho e azul saturados são mais escuros ao olho do que parecem: o azul puro `#0000ff` sobre preto falha até para texto grande, e o vermelho de alerta mal passa no limite para texto pequeno. Amarelo, ciano e verde são os neons mais legíveis em fundos escuros. Confira as duplas segundo as diretrizes WCAG explicadas pelo [WebAIM](https://webaim.org/resources/contrastchecker/) antes de fechar a escolha.

### Difícil de ler

- Parágrafos longos em magenta ou vermelho
- Texto neon com um brilho desfocado em volta
- Texto sobre a parte mais clara do neon
- Três ou quatro neons disputando a mesma linha
- Efeitos glitch em todas as palavras

### Fácil de ler

- Texto corrido em branco suave, neon para títulos
- Letras sólidas e nítidas, sem halo
- Palavras na parte escura do fundo
- Um neon por design, um pequeno destaque
- Glitch numa única palavra ou em nenhuma

Um brilho em volta das letras é o clichê cyberpunk mais comum, e também é o que transforma texto numa mancha no celular. Deixe o fundo carregar a luz e mantenha as letras nítidas. [Contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) traz os números.

## Paletas cyberpunk em designs reais

O visual combina naturalmente com canais de games, times de esports, streamers, música eletrônica, lançamentos de tecnologia e tudo o que fala do futuro das cidades. Também funciona para um bar ou uma barraca de comida da madrugada que quer parecer uma cena de filme.

Uma thumbnail horizontal anunciando a estreia da temporada 4 hoje, em letras amarelas sobre um fundo cyberpunk quase preto

Uma thumbnail do YouTube na paleta Perigo: título amarelo, fundo escuro, ciano para o horário.

Um post vertical com a frase Lámen até as 3h em letras claras sobre um fundo azul escuro com luz magenta

Um post de comida da madrugada na paleta Feira noturna, com o magenta restrito ao fundo.

1. **Escolha o fundo primeiro** Preto-azulado para tecnologia, preto-esverdeado para código, preto quente para vida noturna. Nunca #000000 chapado.
2. **Escolha um neon pelo significado** Amarelo para urgência, magenta para vida noturna, ciano para telas, verde para código, vermelho para alertas.
3. **Acrescente um destaque** Um segundo neon usado em pequenas doses: um horário, um preço, uma linha fina.
4. **Acrescente textura** Granulação, linhas de varredura ou uma textura de concreto evitam que as áreas escuras pareçam uma tela vazia.

Se o seu canal ou time precisa de um fundo cyberpunk que seja de fato seu, você pode reservar um Mark do Gradiently para que só você possa exportar com ele, e ele move sozinho a sua região mais calma e de melhor contraste para trás das suas palavras. [Arte para canal de games](https://gradiently.design/pt-br/guide/gaming-channel-art) e [branding para times de esports](https://gradiently.design/pt-br/guide/esports-team-branding) mostram o visual aplicado, e [cores synthwave](https://gradiently.design/pt-br/guide/synthwave-colors) trata do vizinho mais quente e nostálgico.

## FAQ

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

Amarelo ácido neon, magenta, ciano, verde tóxico e vermelho de alerta, sobre fundos quase pretos como preto-azulado ou cinza de concreto molhado.

### Quais são os códigos hex de uma paleta cyberpunk?

Um bom conjunto inicial é #07080d para o fundo, #fcee0a amarelo ácido, #ff2bd6 magenta, #00f0ff ciano e #39ff14 verde tóxico.

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

O synthwave é quente e nostálgico, construído em torno de um pôr do sol rosa e laranja sobre índigo. O cyberpunk é mais frio e mais sujo, com amarelos, verdes e cianos industriais sobre quase preto.

### Texto neon sobre preto é acessível?

Amarelo, ciano e verde sobre quase preto costumam passar nas verificações de contraste com folga. O azul puro falha e os vermelhos mal passam, então teste cada dupla e deixe os textos longos em branco suave.