retroneonvibrant
Synthwave Color Palette
Synthwave is a retro, neon and vibrant color palette of 5 colors: Midnight Blue (#2b1055), Cornflower Blue (#7597de), Cherry (#d53369), Saffron (#f9c80e) and Tomato (#f86624). Its dominant hue is pink.
The darkest color, Midnight Blue, on the lightest, Saffron, gives a 10.16:1 contrast ratio — enough for body text at WCAG AAA. 3 pairs in this palette pass AA for normal text. Cherry (#d53369) is its most saturated color and a natural choice for buttons and links.
Colors
- Midnight Blue
- Cornflower Blue
- Cherry
- Saffron
- Tomato
CSS Output
:root {
--synthwave-1: #2b1055;
--synthwave-2: #7597de;
--synthwave-3: #d53369;
--synthwave-4: #f9c80e;
--synthwave-5: #f86624;
}Synthwave on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Midnight Blue on Saffron#2b1055 on #f9c80e10.16:1AAA
- Midnight Blue on Cornflower Blue#2b1055 on #7597de5.53:1AA
- Midnight Blue on Tomato#2b1055 on #f866245.28:1AA
- Midnight Blue on Cherry#2b1055 on #d533693.44:1AA Large