# Paleta de cores cyberpunk: néon sobre quase preto, com códigos hex

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

Chuva sobre betão, letreiros em três alfabetos, uma máquina de venda automática a zumbir num beco. A cor cyberpunk é luz dura numa cidade escura. Aqui ficam cinco paletas com códigos e como as manter legíveis.

## The short version

- Uma paleta de cores cyberpunk põe uma ou duas cores néon duras, como amarelo ácido, magenta, ciano ou verde tóxico, sobre um fundo quase preto.
- O fundo no design cyberpunk raramente é preto puro: o preto azulado, o preto esverdeado ou o cinzento de asfalto molhado dão aos néons onde assentar.
- O cyberpunk distingue-se 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 facilmente nas verificações de contraste, enquanto o azul puro falha e os vermelhos ficam muito mais perto do limite.
- Usar um néon dominante e um acento secundário por design mantém os gráficos cyberpunk marcantes em vez de caóticos.

Uma **paleta de cores cyberpunk** é néon sobre quase preto: amarelo ácido, magenta intenso, ciano elétrico e verde tóxico, postos contra o preto azulado de uma cidade à noite. O look vem de décadas de ficção científica sobre alta tecnologia e vida baixa, por isso as cores parecem artificiais e um pouco perigosas. A regra que a faz funcionar é a contenção: um néon dominante, um acento e muito escuro.

## As cores essenciais do cyberpunk

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

Três escuros para construir a cidade, cinco néons para a iluminar. Raramente usarás mais do que dois néons num design.

Cada néon tem uma função. O amarelo lê-se como industrial e urgente, como fita de perigo. O vermelho significa aviso. O magenta é vida noturna e publicidade. O ciano são interfaces, ecrãs e dados. O verde é código e químicos. Escolhe o néon cuja função corresponde à tua mensagem e a paleta começa a contar a história por ti.

## Cinco paletas cyberpunk com códigos hex

| Paleta | Fundo | Néon principal | Acento |
| --- | --- | --- | --- |
| Perigo | `#07080d` | Amarelo ácido `#fcee0a` | Ciano `#00f0ff` |
| Mercado noturno | `#141824` | Magenta `#ff2bd6` | Ciano `#00f0ff` |
| Terminal | `#050b07` | Verde tóxico `#39ff14` | Menta pálida `#b8ffd0` |
| Alerta vermelho | `#0d0608` | Vermelho de aviso `#ff003c` | Amarelo ácido `#fcee0a` |
| Cromado frio | `#0b0f17` | Ciano `#00f0ff` | Aço `#9aa4b5` |

Cada paleta é um fundo, um néon principal e um acento. Usa o acento em menos de um décimo do design.

- Perigo: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Mercado noturno: `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%)`
- Cromado frio: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

As mesmas cinco paletas como fundos. O néon é empurrado para uma aresta ou canto, para a maior parte da superfície ficar escura o bastante para palavras.

## Cores cyberpunk como variáveis CSS

Num site, overlay de stream ou interface de jogo, configura a paleta como propriedades personalizadas para trocares o néon principal num só sítio. Este exemplo usa a paleta Mercado noturno, com o néon reservado a contornos, ligações e um elemento focal.

```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 e sujo; os néons ficam reservados a arestas, ligações e um único canto iluminado.

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

### Fotografias numa paleta cyberpunk

As fotografias comuns podem ser puxadas para a paleta. Fotos noturnas de ruas, chuva no vidro, parques de estacionamento e escadarias funcionam todas depois de escurecidas e tingidas. Um duotone que mapeia as sombras para a cor do fundo e as luzes para o néon principal transforma uma fotografia sem graça de uma paragem de autocarro em algo que pertence ao conjunto. Mantém a tinta forte nos fundos e mais suave nos rostos, onde um duotone de néon completo pode parecer duro. [O efeito duotone](https://gradiently.design/pt-pt/guide/duotone-effect) explica como escolher as duas cores.

## Manter o texto cyberpunk legível

O néon sobre quase preto parece ter de ser legível e, em títulos grandes, normalmente é. Os problemas começam com texto pequeno e com os néons mais escuros. O vermelho e o azul saturados são mais escuros para o olho do que parecem: o azul puro `#0000ff` sobre preto falha mesmo em texto grande, e o vermelho de aviso mal passa o limite em texto pequeno. Amarelo, ciano e verde são os néons mais legíveis em fundos escuros. Verifica os pares segundo as diretrizes WCAG explicadas pela [WebAIM](https://webaim.org/resources/contrastchecker/) antes de te comprometeres.

### Difícil de ler

- Parágrafos longos em magenta ou vermelho
- Texto néon com um brilho desfocado à volta
- Texto sobre a parte mais brilhante do néon
- Três ou quatro néons a competir numa linha
- Efeitos glitch em todas as palavras

### Fácil de ler

- Texto corrido em branco sujo, néon para os títulos
- Letras sólidas e nítidas, sem halo
- Palavras postas na parte escura do fundo
- Um néon por design, um pequeno acento
- Glitch numa só palavra ou nenhum

Um brilho à volta das letras é o cliché cyberpunk mais comum e é também o que faz o texto virar uma mancha num telemóvel. Deixa o fundo carregar a luz e mantém as letras nítidas. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) trata dos números.

## Paletas cyberpunk em designs reais

O look encaixa naturalmente em canais de jogos, equipas de esports, streamers, música eletrónica, lançamentos tecnológicos e tudo o que fale do futuro das cidades. Também pode funcionar num bar ou numa banca de comida noturna que queira parecer uma cena de filme.

Uma miniatura horizontal a anunciar que a Temporada 4 arranca hoje à noite, em letras amarelas sobre um fundo cyberpunk quase preto

Uma miniatura de YouTube na paleta Perigo: título amarelo, fundo escuro, ciano para a hora.

Uma publicação vertical com Noodles até às 3h em letras claras sobre um fundo azul-escuro com luz magenta

Uma publicação de comida noturna na paleta Mercado noturno, com o magenta mantido ao fundo.

1. **Escolhe primeiro o fundo** Preto azulado para tecnologia, preto esverdeado para código, preto quente para vida noturna. Nunca #000000 chapado.
2. **Escolhe um néon pelo significado** Amarelo para urgência, magenta para vida noturna, ciano para ecrãs, verde para código, vermelho para alertas.
3. **Acrescenta um acento** Um segundo néon usado em pequenas quantidades: uma hora, um preço, uma linha fina.
4. **Acrescenta textura** Grão, linhas de varrimento ou uma textura de betão evitam que as zonas escuras pareçam ecrã vazio.

Se o teu canal ou equipa precisa de um fundo cyberpunk que seja verdadeiramente teu, podes reservar um Mark do Gradiently para só tu poderes exportar com ele, e ele move sozinho a sua zona mais calma e de melhor contraste para trás das tuas palavras. [Arte de canal de jogos](https://gradiently.design/pt-pt/guide/gaming-channel-art) e [branding de equipas de esports](https://gradiently.design/pt-pt/guide/esports-team-branding) mostram o look aplicado, e [cores synthwave](https://gradiently.design/pt-pt/guide/synthwave-colors) trata do vizinho mais quente e nostálgico.

## FAQ

### Que cores se usam no cyberpunk?

Amarelo ácido néon, magenta, ciano, verde tóxico e vermelho de aviso, postos contra fundos quase pretos como o preto azulado ou o cinzento de betão molhado.

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

Um bom conjunto de partida é #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.

### O texto néon sobre preto é acessível?

Amarelo, ciano e verde sobre quase preto costumam passar facilmente nas verificações de contraste. O azul puro falha e os vermelhos só mal passam, por isso testa cada par e mantém o texto longo em branco sujo.