Paleta de colores cyberpunk: neón sobre casi negro, con códigos hex

Una paleta de colores cyberpunk es neón sobre casi negro: amarillo ácido, magenta intenso, cian eléctrico y verde tóxico, sobre el negro azulado de una ciudad de noche. El estilo nace de décadas de ciencia ficción sobre alta tecnología y vida de bajos fondos, así que los colores se sienten artificiales y un poco peligrosos. La regla que lo hace funcionar es la contención: un neón dominante, un acento y mucha oscuridad.

Los colores cyberpunk esenciales

Cada neón tiene su función. El amarillo se lee industrial y urgente, como la cinta de peligro. El rojo significa alerta. El magenta es vida nocturna y publicidad. El cian son interfaces, pantallas y datos. El verde es código y química. Elige el neón cuya función encaje con tu mensaje y la paleta empezará a contar la historia por ti.

Cinco paletas cyberpunk con códigos hex

Colores cyberpunk como variables CSS

Para una web, una superposición de streaming o una interfaz de juego, configura la paleta como propiedades personalizadas y podrás cambiar el neón principal en un solo lugar. Este ejemplo usa la paleta Mercado nocturno, con el neón reservado para bordes, enlaces y un 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);
}

Consulta propiedades personalizadas de CSS para temas para cambiar de paleta, y diseño en modo oscuro para las reglas generales de construir sobre fondos oscuros.

Fotos con una paleta cyberpunk

Las fotos corrientes se pueden llevar a la paleta. Las tomas nocturnas de calles, la lluvia sobre el cristal, los aparcamientos y las escaleras funcionan bien una vez oscurecidas y tintadas. Un duotono que lleva las sombras al color de tu fondo y las luces a tu neón principal convierte una foto aburrida de una parada de autobús en algo que encaja en el conjunto. Mantén el tinte fuerte en los fondos y más suave en los rostros, donde un duotono de neón completo puede resultar duro. El efecto duotono explica cómo elegir los dos colores.

Cómo mantener legible el texto cyberpunk

El neón sobre casi negro parece legible por definición, y en titulares grandes casi siempre lo es. Los problemas empiezan con el texto pequeño y con los neones más oscuros. El rojo y el azul saturados son más oscuros para el ojo de lo que parecen: el azul puro #0000ff sobre negro suspende incluso en texto grande, y el rojo de alerta apenas supera el listón en texto pequeño. El amarillo, el cian y el verde son los neones más legibles sobre fondos oscuros. Comprueba los pares con las pautas WCAG que explica WebAIM antes de comprometerte.

El resplandor alrededor de las letras es el cliché cyberpunk más común, y también lo que convierte el texto en una mancha en el móvil. Deja que el fondo lleve la luz y mantén las letras nítidas. Contraste de color y accesibilidad recoge las cifras.

Paletas cyberpunk en diseños reales

El estilo encaja de forma natural con canales de juegos, equipos de esports, streamers, música electrónica, lanzamientos tecnológicos y cualquier cosa sobre el futuro de las ciudades. También puede funcionar para un bar o un puesto de comida nocturno que quiera parecer una escena de película.

1. 1

   Elige primero el fondo

   Negro azulado para tecnología, negro verdoso para código, negro cálido para vida nocturna. Nunca un #000000 plano.

2. 2

   Elige un neón por su significado

   Amarillo para urgencia, magenta para vida nocturna, cian para pantallas, verde para código, rojo para alertas.

3. 3

   Añade un acento

   Un segundo neón en pequeñas dosis: una hora, un precio, una línea fina.

4. 4

   Añade textura áspera

   El grano, las líneas de escaneo o una textura de hormigón evitan que las zonas oscuras parezcan una pantalla vacía.

Si tu canal o tu equipo necesita un fondo cyberpunk que sea de verdad tuyo, puedes reservar un Mark de Gradiently para que solo tú puedas exportar con él, y él mismo coloca detrás de tus palabras su región más tranquila y de mejor contraste. Arte para canales de juegos y identidad visual para equipos de esports muestran el estilo aplicado, y colores synthwave trata a su vecino más cálido y nostálgico.