# Colores synthwave: códigos hex y degradados para noches de neón

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

Un atardecer que nunca termina, una cuadrícula que corre hacia el horizonte, letras cromadas y un cielo del color de un moratón. Esta es la paleta que hay detrás, con códigos y degradados para usar hoy mismo.

## The short version

- Los colores synthwave giran en torno al rosa intenso, el cian eléctrico, el naranja atardecer y el violeta sobre un cielo índigo profundo o casi negro.
- El degradado synthwave por excelencia va del amarillo al violeta pasando por el naranja y el rosa, como un sol que se hunde en el horizonte.
- El synthwave, también llamado retrowave u outrun, toma prestado de los carteles de cine, los videojuegos arcade y los anuncios de coches de los años 80 vistos a través de la nostalgia posterior.
- El fondo de cielo nocturno es lo que más importa: sin una base índigo oscura, los colores neón pierden su brillo y se ven planos.
- Mantén el texto en una tinta clara y sólida sobre la parte más oscura del diseño en lugar de rodearlo de resplandor, para que se vea nítido a tamaños pequeños.

Los **colores synthwave** son el rosa intenso, el cian eléctrico, el naranja atardecer y el violeta profundo, todos sobre un cielo nocturno índigo. El estilo viene de una escena musical y artística que reimagina los años 80: un sol a rayas en el horizonte, un suelo de cuadrícula luminosa, letras cromadas y siluetas de palmeras. Los colores son vivos, pero solo funcionan porque el fondo es muy oscuro. Empieza por la noche y después añade el neón.

## La paleta de colores synthwave con códigos hex

- Medianoche: #0b0221
- Cielo índigo: #241047
- Bruma violeta: #6a1b9a
- Rosa intenso: #ff2a6d
- Naranja atardecer: #ff8a3d
- Amarillo sol: #ffd23f
- Cian eléctrico: #05d9e8
- Blanco cromo: #d1f7ff

Tres oscuros para el cielo, tres cálidos para el sol, un neón frío y un brillo cromado. La mayoría de los diseños synthwave usan cinco de ellos como mucho.

Piensa en la paleta en dos mitades. La mitad cálida (amarillo, naranja, rosa) pertenece al sol y al horizonte. La mitad fría (cian y blanco cromo) pertenece a la cuadrícula, las líneas y las letras. Mantener cada mitad en su sitio da estructura al estilo y evita que se convierta en un batiburrillo de neón.

## Degradados synthwave para copiar

El atardecer es el corazón del synthwave. Siempre va de cálido a frío de arriba abajo del sol, o desde el horizonte hacia el cielo. Abajo tienes los degradados que aparecen una y otra vez, cada uno escrito como un único valor CSS.

- Sol a rayas: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- De la noche al horizonte: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- De cian a rosa: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Relleno de letra cromada: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Resplandor del horizonte: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Fondo nocturno liso: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

El relleno cromado tiene un corte brusco en el centro, que es lo que lo hace parecer metal pulido reflejando un horizonte.

> **Evita el gris donde el rosa se une al cian** El rosa y el cian están muy separados en el círculo cromático, así que una mezcla directa entre ellos cae en un malva apagado. Haz pasar la mezcla por el violeta, como en el degradado de cian a rosa de arriba, y se mantiene vivo. [Degradados sucios](https://gradiently.design/es/guide/muddy-gradients) explica por qué.

## El sol y la cuadrícula synthwave en CSS

Las dos formas clásicas son fáciles de construir con degradados en capas. El sol es un círculo relleno con el degradado de atardecer y cortado por franjas horizontales. La cuadrícula son dos degradados repetidos, uno horizontal y otro vertical, inclinados hacia atrás con una transformación de perspectiva.

```css
.sky {
  background: linear-gradient(180deg, #0b0221 0%, #241047 55%, #6a1b9a 100%);
}

.sun {
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23f 0%, #ff8a3d 40%, #ff2a6d 75%, #b3138f 100%);
  /* solid top half, plus stripes: mask layers add together */
  mask-image:
    linear-gradient(180deg, #000 0 55%, transparent 55%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
}

.grid {
  height: 40vh;
  background-color: #0b0221;
  background-image:
    repeating-linear-gradient(0deg, #05d9e8 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, #05d9e8 0 2px, transparent 2px 48px);
  transform: perspective(300px) rotateX(60deg);
  transform-origin: top;
}
```

Un cielo nocturno, un sol de atardecer rayado en su mitad inferior y una cuadrícula cian inclinada en perspectiva. Coloca el sol en la línea del horizonte entre el cielo y la cuadrícula.

Para más sobre franjas y cuadrículas, consulta [degradados CSS repetidos](https://gradiently.design/es/guide/css-repeating-gradient). Si animas la cuadrícula desplazándose hacia el espectador, respeta a quienes han pedido a su dispositivo menos movimiento, como se explica en [movimiento reducido](https://gradiently.design/es/guide/reduced-motion).

## Synthwave, vaporwave y cyberpunk comparados

Estos tres se confunden porque comparten el neón. Las diferencias están en el fondo y en el ambiente, y importan a la hora de elegir paleta.

| Estilo | Fondo | Colores clave | Ambiente |
| --- | --- | --- | --- |
| Synthwave | Noche índigo profunda | Cálidos de atardecer, cuadrícula cian, cromo | Conducir de noche, épico, nostálgico |
| Vaporwave | Pastel o verde azulado suave | Lila, menta, rosa salmón | Irónico, onírico, centro comercial |
| Cyberpunk | Casi negro, calles mojadas | Amarillo ácido, verde tóxico, magenta | Crudo, urbano, distópico |

El synthwave es el más cálido y romántico de los tres. Lee [colores vaporwave](https://gradiently.design/es/guide/vaporwave-colors) y [paletas de colores cyberpunk](https://gradiently.design/es/guide/cyberpunk-colors) para los otros.

## Tres combinaciones de colores synthwave para distintos ambientes

La paleta completa es mucho. La mayoría de los buenos trabajos synthwave eligen una combinación más reducida y se comprometen con ella. Estas tres cubren los ambientes que se suelen buscar, y cada una está hecha con los códigos de arriba.

| Combinación | Colores | Ideal para |
| --- | --- | --- |
| Atardecer clásico | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Portadas de discos, carteles de eventos, todo lo épico |
| Neón frío | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tecnología, gaming, contenido nocturno más tranquilo |
| Crepúsculo violeta | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Pódcasts, playlists, feeds de marca más suaves |

Cada combinación mantiene un único fondo oscuro y añade como mucho tres colores encima.

Si estás construyendo todo un feed, elige una combinación para las publicaciones habituales y reserva el atardecer completo para los grandes momentos, como un estreno o un lanzamiento. Un feed en el que cada publicación es un atardecer en llamas deja pronto de parecer especial, y el atardecer pierde su fuerza cuando por fin lo necesitas. La misma idea aparece en [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds), que explica cómo mantener rico un fondo nocturno sin que se vuelva plano o haga banding.

## Cómo usar los colores synthwave en tus diseños

El synthwave encaja con lanzamientos musicales, directos de videojuegos, noches de club, pódcasts sobre cine y todo lo que quiera sentirse como un viaje en coche de madrugada. La trampa es la legibilidad: los diseñadores suelen rodear el texto con un resplandor neón, que se emborrona a tamaños pequeños y en los móviles. Pon las palabras en blanco cromo o amarillo sol sólidos sobre la parte más oscura del cielo. El color que las rodea ya se encarga de brillar.

Una portada cuadrada de pódcast titulada Night Drive Radio en letra clara sobre un fondo synthwave violeta oscuro y rosa

Una portada cuadrada de pódcast: tipografía clara y sólida sobre el cielo oscuro, con el color en los bordes.

Una historia vertical que anuncia un nuevo single en letra clara en lo alto de un cielo synthwave oscuro con color cálido cerca de la parte inferior

La misma paleta en una historia, con el atardecer cálido abajo y las palabras arriba, en la oscuridad.

- Mantén el sol o la zona cálida más brillante lejos del titular.
- Usa el cian para líneas finas y pequeños detalles, no para grandes rellenos.
- Añade un grano fino para que el cielo oscuro no haga banding al exportar.
- Elige una tipografía de titulares con aire cromado o cursiva y úsala en todas partes.

Los Marks de Gradiently se comportan como necesita el synthwave: la parte más tranquila y con mejor contraste del fondo se mueve detrás de tus palabras, y la tinta automática elige texto claro u oscuro línea a línea, así que un titular nunca se pelea con el sol. Para la década que todo esto imita, consulta la [estética de los 80](https://gradiently.design/es/guide/80s-aesthetic).

## FAQ

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

Rosa intenso, cian eléctrico, naranja atardecer, amarillo sol y violeta, sobre un cielo índigo profundo o casi negro con brillos en blanco cromo.

### ¿Cuál es el degradado synthwave?

Un atardecer que va del amarillo al violeta pasando por el naranja y el rosa. En CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### ¿Synthwave es lo mismo que retrowave u outrun?

Los nombres se usan casi como sinónimos. Outrun suele referirse a la parte del estilo ligada a la conducción y los deportivos, pero la paleta es la misma.

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

El synthwave usa neones saturados sobre un cielo nocturno oscuro. El vaporwave usa pasteles más suaves, como lila, menta y salmón, sobre fondos claros o verde azulado.