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

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

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.

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.

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

Para más sobre franjas y cuadrículas, consulta degradados CSS repetidos. 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.

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.

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.

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

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