Vaporwave colors and synthwave palettes, with hex codes

Vaporwave colors are soft, glowing pastels: hot pink, cyan, mint, lilac and a pale lemon yellow, usually set on pale or washed skies. Its louder cousin, synthwave, takes the same pink and cyan, turns them up to neon and puts them on a near-black night with a striped sun sinking into a grid. Below are both palettes with hex codes, gradients you can copy, the CSS for the sunset scene, and how to use the mood without it tipping into parody.

A little context helps you use them on purpose. Vaporwave grew online in the early 2010s as a music and image style built from half-remembered consumer culture: early computer graphics, shopping mall calm, old operating system windows and classical statues. Synthwave draws on the look of 1980s films and arcade games: night drives, neon signs and laser grids. For the wider decade story, see retro gradients.

The classic vaporwave color palette

One five-colour set turns up again and again when people describe vaporwave, and it earns its place: every colour is light, saturated and slightly synthetic, like a screen seen through haze. Use it as your starting point, then decide which one or two colours lead.

Pink and cyan are the heart of it: a warm and a cool at similar brightness, which is why they sit together without one swallowing the other. Lilac bridges them, so a pink to lilac to cyan blend never passes through grey. Mint and lemon are best kept small, for a price, a sticker or a single word.

Synthwave colors: the night version

Synthwave, sometimes called retrowave, keeps the hues but changes the light. The ground is almost black with a violet cast, the horizon glows magenta, and the sun runs from yellow at the top to pink and purple at the bottom. Where vaporwave feels like a hazy afternoon, synthwave is midnight on an empty road.

Vaporwave and synthwave gradients to copy

Gradients are where this style lives, because every motif is really a light source: a sun, a horizon, a glowing sign. Each blend below stays on one side of the colour wheel or passes through lilac, so none of them goes muddy in the middle. If one does on your screen, muddy gradients explains why and how to fix it.

Neon blends like these band easily on large screens, because long stretches of similar dark violet leave few colour steps. A little grain hides the steps and adds the soft, slightly degraded surface the style is known for. See grainy gradients for the method, and neon gradients for brighter, cleaner neon without the retro framing.

How to draw a synthwave sunset and grid in CSS

The whole scene is three layers: a sky gradient, a sun with horizontal cuts through its lower half, and a grid floor tilted in perspective. The cuts are a mask with hard stops, and the grid is two thin line gradients repeated at the same size. It runs in any current browser.

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

To animate it, move the floor's background position downwards in a loop by exactly one cell, 60px, so the grid appears to roll towards you forever. Keep it slow, and respect people who ask for less movement with prefers reduced motion.

Using the vaporwave look without parody

The style is so recognisable that a pile of its clichés reads as a joke. That is fine for a meme; it is a problem for a brand, a record sleeve or a poster you want taken seriously. The fix is restraint: borrow the colour and one motif, and let everything else be modern.

Where vaporwave colors work best

The palette suits anything nocturnal, musical or playfully nostalgic: playlist covers at 1080×1080, podcast covers at 3000×3000, club and gig posters, Twitch offline screens at 1920×1080 and product drops with a retro edge. It is a harder sell for banking, healthcare or anything that needs to feel quietly trustworthy. For a stream, stream backgrounds covers layout; for covers, see podcast cover art.

If you want the synthwave night without building it from scratch, search the Gradiently Market with colour words like "neon magenta" or "deep violet" and design with any Mark you find, free. For the closely related pastel look of the late nineties and early 2000s, read the Y2K aesthetic.