Vaporwave Palette
CSS variables
:root {
--color-1: #FF71CE;
--color-2: #01CDFE;
--color-3: #05FFA1;
--color-4: #B967FF;
--color-5: #FFFB96;
}Tailwind config
// tailwind.config.js
colors: {
"vaporwave-1": "#FF71CE",
"vaporwave-2": "#01CDFE",
"vaporwave-3": "#05FFA1",
"vaporwave-4": "#B967FF",
"vaporwave-5": "#FFFB96",
}About this palette
The Vaporwave palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
Aa
#FF71CENear-black7.65:1AAAa
#01CDFENear-black10.04:1AAAa
#05FFA1Near-black14.24:1AAAa
#B967FFNear-black5.80:1AAAa
#FFFB96Near-black17.54:1AAThese colours on each other
None of the 20 combinations inside this palette reach 4.5:1, so pair its colours with white or near-black rather than with each other.
| text \\ background | #FF71CE | #01CDFE | #05FFA1 | #B967FF | #FFFB96 |
|---|---|---|---|---|---|
| #FF71CE | 1.31Fails | 1.86Fails | 1.32Fails | 2.29Fails | |
| #01CDFE | 1.31Fails | 1.42Fails | 1.73Fails | 1.75Fails | |
| #05FFA1 | 1.86Fails | 1.42Fails | 2.45Fails | 1.23Fails | |
| #B967FF | 1.32Fails | 1.73Fails | 2.45Fails | 3.02Large only | |
| #FFFB96 | 2.29Fails | 1.75Fails | 1.23Fails | 3.02Large only |
More palettes