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

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

Lluvia sobre el hormigón, letreros en tres alfabetos, una máquina expendedora zumbando en un callejón. El color cyberpunk es luz dura en una ciudad oscura. Aquí van cinco paletas con códigos y cómo mantenerlas legibles.

## The short version

- Una paleta de colores cyberpunk coloca uno o dos neones duros, como amarillo ácido, magenta, cian o verde tóxico, sobre un fondo casi negro.
- El fondo en el diseño cyberpunk rara vez es negro puro: el negro azulado, el negro verdoso o el gris asfalto mojado dan a los neones un lugar donde asentarse.
- El cyberpunk se distingue del synthwave por ser más frío y más áspero, con amarillos y verdes industriales en lugar de rosas y naranjas de atardecer.
- El amarillo, el cian y el verde sobre casi negro superan con facilidad las pruebas de contraste, mientras que el azul puro suspende y los rojos quedan mucho más cerca del límite.
- Usar un neón dominante y un acento secundario por diseño hace que los gráficos cyberpunk impacten en lugar de resultar caóticos.

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

- Asfalto nocturno: #07080d
- Negro azulado: #141824
- Hormigón mojado: #2b2f3a
- Amarillo ácido: #fcee0a
- Rojo de alerta: #ff003c
- Letrero magenta: #ff2bd6
- Cian de interfaz: #00f0ff
- Verde tóxico: #39ff14

Tres oscuros para construir la ciudad, cinco neones para iluminarla. Rara vez usarás más de dos neones en un mismo diseño.

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

| Paleta | Fondo | Neón principal | Acento |
| --- | --- | --- | --- |
| Peligro | `#07080d` | Amarillo ácido `#fcee0a` | Cian `#00f0ff` |
| Mercado nocturno | `#141824` | Magenta `#ff2bd6` | Cian `#00f0ff` |
| Terminal | `#050b07` | Verde tóxico `#39ff14` | Menta pálido `#b8ffd0` |
| Alerta roja | `#0d0608` | Rojo de alerta `#ff003c` | Amarillo ácido `#fcee0a` |
| Cromo frío | `#0b0f17` | Cian `#00f0ff` | Acero `#9aa4b5` |

Cada paleta es un fondo, un neón principal y un acento. Usa el acento en menos de una décima parte del diseño.

- Peligro: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Mercado nocturno: `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 roja: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Cromo frío: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

Las mismas cinco paletas como fondos. El neón se empuja hacia un borde o una esquina, de modo que la mayor parte de la superficie sigue lo bastante oscura para el texto.

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

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

El texto del cuerpo se queda en un blanco roto suave; los neones se reservan para los bordes, los enlaces y una única esquina iluminada.

Consulta [propiedades personalizadas de CSS para temas](https://gradiently.design/es/guide/css-custom-properties-theming) para cambiar de paleta, y [diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) 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](https://gradiently.design/es/guide/duotone-effect) 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](https://webaim.org/resources/contrastchecker/) antes de comprometerte.

### Difícil de leer

- Párrafos largos en magenta o rojo
- Texto neón con un resplandor borroso alrededor
- Texto sobre la parte más brillante del neón
- Tres o cuatro neones compitiendo en una línea
- Efectos glitch en cada palabra

### Fácil de leer

- Texto del cuerpo en blanco roto, neón para los titulares
- Letras sólidas y nítidas, sin halo
- Palabras colocadas sobre la parte oscura del fondo
- Un neón por diseño, un acento pequeño
- Glitch en una sola palabra o ninguno

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](https://gradiently.design/es/guide/color-contrast-accessibility) 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.

Una miniatura horizontal que anuncia la temporada 4 esta noche, con texto amarillo sobre un fondo cyberpunk casi negro

Una miniatura de YouTube en la paleta Peligro: titular amarillo, fondo oscuro, cian para la hora.

Una publicación vertical que dice Fideos hasta las 3 de la mañana en letras claras sobre un fondo azul oscuro con luz magenta

Una publicación de comida nocturna en la paleta Mercado nocturno, con el magenta relegado al fondo.

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. **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. **Añade un acento** Un segundo neón en pequeñas dosis: una hora, un precio, una línea fina.
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](https://gradiently.design/es/guide/gaming-channel-art) y [identidad visual para equipos de esports](https://gradiently.design/es/guide/esports-team-branding) muestran el estilo aplicado, y [colores synthwave](https://gradiently.design/es/guide/synthwave-colors) trata a su vecino más cálido y nostálgico.

## FAQ

### ¿Qué colores se usan en el cyberpunk?

Amarillo ácido neón, magenta, cian, verde tóxico y rojo de alerta, sobre fondos casi negros como el negro azulado o el gris hormigón mojado.

### ¿Cuáles son los códigos hex de una paleta cyberpunk?

Un buen punto de partida es #07080d para el fondo, #fcee0a amarillo ácido, #ff2bd6 magenta, #00f0ff cian y #39ff14 verde tóxico.

### ¿Qué diferencia hay entre los colores cyberpunk y los synthwave?

El synthwave es cálido y nostálgico, construido en torno a un atardecer rosa y naranja sobre índigo. El cyberpunk es más frío y áspero, con amarillos, verdes y cianes industriales sobre casi negro.

### ¿Es accesible el texto neón sobre negro?

El amarillo, el cian y el verde sobre casi negro suelen superar con facilidad las pruebas de contraste. El azul puro suspende y los rojos apenas aprueban, así que prueba cada par y no uses texto largo en blanco puro.