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

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

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

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.

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

Veja propriedades personalizadas CSS para temas para alternar paletas, e design em modo escuro 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 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 antes de fechar a escolha.

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

1. 1

   Escolha o fundo primeiro

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

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

   Acrescente um destaque

   Um segundo neon usado em pequenas doses: um horário, um preço, uma linha fina.

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