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

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

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

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.

: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);
}

Vê propriedades personalizadas CSS para temas para alternar paletas e design em modo escuro 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 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 antes de te comprometeres.

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

1. 1

   Escolhe primeiro o fundo

   Preto azulado para tecnologia, preto esverdeado para código, preto quente para vida noturna. Nunca #000000 chapado.

2. 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. 3

   Acrescenta um acento

   Um segundo néon usado em pequenas quantidades: uma hora, um preço, uma linha fina.

4. 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 e branding de equipas de esports mostram o look aplicado, e cores synthwave trata do vizinho mais quente e nostálgico.