# Synthwave colors: hex codes and gradients for neon nights

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

A sunset that never finishes, a grid running to the horizon, chrome letters and a sky the colour of a bruise. Here is the palette behind it, with codes and gradients you can use today.

## The short version

- Synthwave colors centre on hot pink, electric cyan, sunset orange and violet set against a deep indigo or near black sky.
- The signature synthwave gradient runs from yellow through orange and pink to violet, like a sun sinking into the horizon.
- Synthwave, also called retrowave or outrun, borrows from 1980s film posters, arcade games and car adverts as seen through later nostalgia.
- The night sky ground matters most: without a dark indigo base the neon colours lose their glow and look flat.
- Keep text in solid light ink on the darkest part of the design rather than surrounding it with glow, so it stays sharp at small sizes.

**Synthwave colors** are hot pink, electric cyan, sunset orange and deep violet, all set against an indigo night sky. The look comes from a music and art scene that reimagines the 1980s: a striped sun on the horizon, a glowing grid floor, chrome lettering and palm silhouettes. The colours are bright, but they only work because the ground is so dark. Start with the night, then add the neon.

## The synthwave color palette with hex codes

- Midnight: #0b0221
- Indigo sky: #241047
- Violet haze: #6a1b9a
- Hot pink: #ff2a6d
- Sunset orange: #ff8a3d
- Sun yellow: #ffd23f
- Electric cyan: #05d9e8
- Chrome white: #d1f7ff

Three darks for the sky, three warms for the sun, one cool neon and a chrome highlight. Most synthwave designs use five of these at most.

Think of the palette in two halves. The warm half (yellow, orange, pink) belongs to the sun and the horizon. The cool half (cyan and chrome white) belongs to the grid, the lines and the lettering. Keeping the halves in their places gives the look its structure and stops it turning into a muddle of neon.

## Synthwave gradients you can copy

The sunset is the heart of synthwave. It always runs warm to cool from top to bottom of the sun, or from the horizon up into the sky. Below are the gradients that turn up again and again, each written as a single CSS value.

- Striped sun: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Night to horizon: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Cyan to pink: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Chrome letter fill: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Horizon glow: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Plain night ground: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

The chrome fill has a hard break at the middle, which is what makes it look like polished metal reflecting a horizon.

> **Avoid grey where pink meets cyan** Pink and cyan sit far apart on the colour wheel, so a straight blend between them dips into a dull mauve. Route the blend through violet, as in the cyan to pink gradient above, and it stays vivid. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) explains why.

## Synthwave sun and grid in CSS

The two classic shapes are easy to build with layered gradients. The sun is a circle filled with the sunset gradient and cut by horizontal stripes. The grid is two repeating gradients, one horizontal and one vertical, tilted back with a perspective transform.

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

A night sky, a sunset sun striped through its lower half, and a cyan grid tilted into perspective. Place the sun on the horizon line between sky and grid.

For more on stripes and grids, see [repeating CSS gradients](https://gradiently.design/guide/css-repeating-gradient). If you animate the grid scrolling towards the viewer, respect people who have asked their device for less motion, as covered in [reduced motion](https://gradiently.design/guide/reduced-motion).

## Synthwave, vaporwave and cyberpunk compared

These three get mixed up because they share neon. The differences are in the ground and the mood, and they matter when you choose a palette.

| Look | Ground | Key colours | Mood |
| --- | --- | --- | --- |
| Synthwave | Deep indigo night | Sunset warms, cyan grid, chrome | Driving at night, heroic, nostalgic |
| Vaporwave | Pastel or soft teal | Lilac, mint, salmon pink | Ironic, dreamy, shopping mall |
| Cyberpunk | Near black, wet streets | Acid yellow, toxic green, magenta | Gritty, urban, dystopian |

Synthwave is the warmest and most romantic of the three. Read [vaporwave colours](https://gradiently.design/guide/vaporwave-colors) and [cyberpunk colour palettes](https://gradiently.design/guide/cyberpunk-colors) for the others.

## Three synthwave color combinations for different moods

The full palette is a lot. Most good synthwave work picks a narrower combination and commits to it. These three cover the moods people usually want, and each one is built from the codes above.

| Combination | Colours | Best for |
| --- | --- | --- |
| Classic sunset | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Album art, event posters, anything heroic |
| Cold neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tech, gaming, calmer late night content |
| Violet dusk | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcasts, playlists, softer brand feeds |

Each combination keeps one dark ground and adds no more than three colours on top.

If you are building a whole feed, choose one combination for regular posts and save the full sunset for big moments such as a release or a launch. A feed where every post is a blazing sunset quickly stops feeling special, and the sunset loses its pull when you finally need it. The same thinking appears in [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds), which covers how to keep a night ground rich without it turning flat or banded.

## Using synthwave colors in your designs

Synthwave suits music releases, gaming streams, club nights, podcasts about film and anything that wants to feel like a late night drive. The trap is legibility: designers often surround text with a neon glow, which smears at small sizes and on phones. Set words in solid chrome white or sun yellow on the darkest part of the sky instead. The colour around them does the glowing.

A square podcast cover titled Night Drive Radio in light type on a dark violet and pink synthwave background

A square podcast cover: solid light type on the dark sky, colour kept to the edges.

A vertical story announcing a new single in light type high on a dark synthwave sky with warm colour near the bottom

The same palette in a story, with the warm sunset kept low and the words high in the dark.

- Keep the sun or the brightest warm area away from the headline.
- Use cyan for thin lines and small details, not big fills.
- Add fine grain so the dark sky doesn't band on export.
- Pick one display face with a chrome or italic feel and use it everywhere.

Gradiently's Marks behave the way synthwave needs: the calmest, best contrasting part of the background moves behind your words, and Auto ink picks light or dark type line by line, so a headline never fights the sun. For the decade it is all imitating, see the [80s aesthetic](https://gradiently.design/guide/80s-aesthetic).

## FAQ

### What colours are used in synthwave?

Hot pink, electric cyan, sunset orange, sun yellow and violet, set on a deep indigo or near black sky with chrome white highlights.

### What is the synthwave gradient?

A sunset that runs from yellow through orange and pink to violet. In CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Is synthwave the same as retrowave or outrun?

The names are used almost interchangeably. Outrun often refers to the driving and sports car side of the look, but the palette is the same.

### What is the difference between synthwave and vaporwave colours?

Synthwave uses saturated neons on a dark night sky. Vaporwave uses softer pastels such as lilac, mint and salmon on light or teal grounds.