Vaporwave color palette
Pink #FF71CE, cyan #01CDFE, mint #05FFA1, lavender #B967FF and pale yellow are the colors of late-80s computer graphics and mall fountains, seen through internet nostalgia. All five are bright and none is dark, so they look strongest on deep purple or black. It fits lo-fi music channels, retro streetwear, event flyers and any site that wants an ironic, dreamy edge.
Vaporwave palette in use
Place these on a black or deep purple background, using #FFFB96 or #05FFA1 for text. #FF71CE makes the main button, #01CDFE works for links, and #B967FF fills gradients and shapes.
This pair measures 19.49:1, so it works for body text too. The button uses #B967FF with black text.
ButtonGood for
- Lo-fi music channel art
- Retro streetwear label
- Synth night flyer
- Album cover
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#B967FF | #FFFB96 | 3.02:1 | AA large |
Vaporwave palette as code
CSS variables
:root {
--vaporwave-1: #FF71CE;
--vaporwave-2: #01CDFE;
--vaporwave-3: #05FFA1;
--vaporwave-4: #B967FF;
--vaporwave-5: #FFFB96;
}Tailwind v4
@theme {
--color-vaporwave-1: #FF71CE;
--color-vaporwave-2: #01CDFE;
--color-vaporwave-3: #05FFA1;
--color-vaporwave-4: #B967FF;
--color-vaporwave-5: #FFFB96;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'vaporwave': {
100: '#FF71CE',
200: '#01CDFE',
300: '#05FFA1',
400: '#B967FF',
500: '#FFFB96',
},SCSS
$vaporwave-1: #FF71CE;
$vaporwave-2: #01CDFE;
$vaporwave-3: #05FFA1;
$vaporwave-4: #B967FF;
$vaporwave-5: #FFFB96;JSON
["#FF71CE","#01CDFE","#05FFA1","#B967FF","#FFFB96"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.