Colores vaporwave y paletas synthwave, con códigos hex

Los colores vaporwave son pasteles suaves y luminosos: rosa intenso, cian, menta, lila y un amarillo limón pálido, normalmente sobre cielos pálidos o desvaídos. Su primo más ruidoso, el synthwave, toma el mismo rosa y el mismo cian, los sube a neón y los pone sobre una noche casi negra con un sol a rayas que se hunde en una cuadrícula. Abajo tienes las dos paletas con códigos hex, degradados para copiar, el CSS de la escena del atardecer y cómo usar el ambiente sin que caiga en la parodia.

Un poco de contexto ayuda a usarlos con intención. El vaporwave nació en internet a principios de la década de 2010 como un estilo musical y visual hecho de cultura de consumo medio recordada: gráficos de ordenador primitivos, la calma de los centros comerciales, ventanas de sistemas operativos antiguos y estatuas clásicas. El synthwave bebe de la estética del cine y los videojuegos arcade de los ochenta: viajes nocturnos en coche, letreros de neón y cuadrículas láser. Para la historia completa de la década, mira degradados retro.

La paleta de colores vaporwave clásica

Hay un conjunto de cinco colores que aparece una y otra vez cuando la gente describe el vaporwave, y se ha ganado su sitio: todos son claros, saturados y algo sintéticos, como una pantalla vista a través de la bruma. Úsalo como punto de partida y luego decide qué uno o dos colores mandan.

El rosa y el cian son su corazón: un cálido y un frío con un brillo parecido, y por eso conviven sin que uno se trague al otro. El lila hace de puente entre ellos, así que una mezcla de rosa a lila y a cian nunca pasa por el gris. El menta y el limón funcionan mejor en pequeño, para un precio, una pegatina o una sola palabra.

Colores synthwave: la versión nocturna

El synthwave, también llamado retrowave, conserva los tonos pero cambia la luz. El fondo es casi negro con un matiz violeta, el horizonte brilla en magenta y el sol va del amarillo arriba al rosa y el morado abajo. Si el vaporwave se siente como una tarde brumosa, el synthwave es la medianoche en una carretera vacía.

Degradados vaporwave y synthwave para copiar

Los degradados son donde vive este estilo, porque cada motivo es en realidad una fuente de luz: un sol, un horizonte, un letrero luminoso. Cada mezcla de abajo se queda en un lado de la rueda de color o pasa por el lila, así que ninguna se enturbia en el centro. Si en tu pantalla alguna lo hace, degradados turbios explica por qué y cómo arreglarlo.

Las mezclas neón como estas forman bandas con facilidad en pantallas grandes, porque los tramos largos de violeta oscuro parecido dejan pocos escalones de color. Un poco de grano oculta los escalones y añade la superficie suave y algo degradada por la que se conoce el estilo. Mira degradados con grano para el método, y degradados neón para un neón más brillante y limpio sin el marco retro.

Cómo dibujar un atardecer synthwave y su cuadrícula en CSS

Toda la escena son tres capas: un degradado de cielo, un sol con cortes horizontales en su mitad inferior y un suelo de cuadrícula inclinado en perspectiva. Los cortes son una máscara con paradas duras, y la cuadrícula son dos degradados de línea fina repetidos al mismo tamaño. Funciona en cualquier navegador actual.

.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  perspective: 400px;
  background: linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 240px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 40%, #ff2975 75%, #8c1eff 100%);
  /* horizontal cuts across the lower half */
  mask: linear-gradient(180deg, #000 55%, transparent 55% 59%, #000 59% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
}

.floor {
  position: absolute;
  inset: 55% -50% -40%;
  transform: rotateX(60deg);
  transform-origin: top;
  background:
    linear-gradient(#ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    linear-gradient(90deg, #ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    #0b0221;
}

Para animarlo, mueve la posición del fondo del suelo hacia abajo en bucle exactamente una celda, 60px, para que la cuadrícula parezca rodar hacia ti sin fin. Mantenlo lento y respeta a quien pide menos movimiento con prefers reduced motion.

Cómo usar la estética vaporwave sin caer en la parodia

El estilo es tan reconocible que un montón de sus tópicos juntos se lee como una broma. Eso está bien para un meme; es un problema para una marca, la carátula de un disco o un póster que quieres que se tome en serio. La solución es la contención: toma prestado el color y un motivo, y deja que todo lo demás sea moderno.

Dónde funcionan mejor los colores vaporwave

La paleta encaja con todo lo nocturno, musical o nostálgico con humor: portadas de playlists a 1080×1080, portadas de pódcast a 3000×3000, carteles de clubs y conciertos, pantallas de desconexión de Twitch a 1920×1080 y lanzamientos de producto con un toque retro. Cuesta más en banca, salud o cualquier cosa que deba transmitir una confianza discreta. Para un directo, fondos para streaming cubre la composición; para portadas, mira portadas de pódcast.

Si quieres la noche synthwave sin construirla desde cero, busca en el Mercado de Gradiently con palabras de color como «magenta neón» o «violeta profundo» y diseña gratis con cualquier Mark que encuentres. Para el aspecto pastel emparentado de finales de los noventa y principios de los 2000, lee estética Y2K.