Vaporwave Color Psychology & Meaning
Vaporwave is the aesthetic language of internet nostalgia — glitchy, dreamlike, hyper-saturated. It processes mall culture and 80s graphics through millennial irony.
#FF6EC7
#7B2FBE
#00FFFF
#1A1A2E
Background
Primary Accent
Secondary
Body Text
Vaporwave
neonvibrantcool springsummer brandingsocial
AA
WCAG Grade
6.7:1
Contrast Ratio
4,512
Saves
12,890
AI Copies
Use #FF6EC7 as the background. Use #7B2FBE as the primary accent. Use #00FFFF as secondary. Use #1A1A2E as body text/supporting color. Palette mood: Vaporwave — neon, vibrant, cool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Vaporwave color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 36.5% | 255, 110, 199 | 0%, 57%, 22%, 0% | 323°, 100%, 72% | ||
| Primary Accent Luminance: 10.0% | 123, 47, 190 | 35%, 75%, 0%, 25% | 272°, 60%, 46% | ||
| Secondary Luminance: 78.7% | 0, 255, 255 | 100%, 0%, 0%, 0% | 180°, 100%, 50% | ||
| Body Text Luminance: 1.2% | 26, 26, 46 | 43%, 43%, 0%, 82% | 240°, 28%, 14% |
Color Harmony: Split-Complementary Scheme
The Vaporwave palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Vaporwave emerged as a music genre around 2010-2012 and became a visual aesthetic. Macintosh Plus's 'Floral Shoppe' (2011) is considered the defining visual statement.
Best Design Use Cases
Deep purple-navy as the base. Hot pink and cyan as the dual accents — always used together. Never just one without the other.
Industries This Palette Suits
Music, nightlife, internet culture, fashion.
How to Implement the Vaporwave Color Scheme
To use this Vaporwave color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FF6EC7 for the main background and #7B2FBE for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A1A2E and #FF6EC7 is 6.75:1 (AA). Ensure your body text remains legible.