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.
On this page
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
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.
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.
.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;
}For more on stripes and grids, see repeating CSS gradients. If you animate the grid scrolling towards the viewer, respect people who have asked their device for less motion, as covered in 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.
Ground
Key colours
Mood
Ground
Key colours
Mood
Ground
Key colours
Mood
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.
Colours
#0b0221, #ff2a6d, #ff8a3d, #ffd23fBest for
Colours
#0b0221, #241047, #05d9e8, #d1f7ffBest for
Colours
#241047, #6a1b9a, #ff2a6d, #d1f7ffBest for
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, 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: solid light type on the dark sky, colour kept to the edges.
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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile