What colors are in the Vaporwave palette?

The Vaporwave palette has 5 colors: #FF71CE, #B967FF, #01CDFE, #05FFA1, #FFFB96.

Where can I use this palette?

It's a Neon palette — well suited to gaming ui, music & events, bold branding, social graphics.

Is the Vaporwave palette accessible?

Its darkest and lightest colors have a contrast ratio of 1.75:1. Check specific pairs in the contrast checker before using them for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Vaporwave palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Secondary #FF71CE Neon Pink Primary #B967FF Medium Orchid Text #01CDFE Deep Sky Blue Accent #05FFA1 Medium Spring Green Surface #FFFB96 Butter Yellow

Vaporwave

5 colors

Open in generator All palettes

Secondary Neon Pink — #FF71CE

Primary Medium Orchid — #B967FF

Text Deep Sky Blue — #01CDFE

Accent Medium Spring Green — #05FFA1

Surface Butter Yellow — #FFFB96

Contrast matrix

Text on Surface 1.75 Fail

Primary on Surface 3.02 AA Large

Text on Secondary 1.31 Fail

Surface on Primary 3.02 AA Large

Accent on Text 1.42 Fail

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --secondary: #FF71CE;
  --primary: #B967FF;
  --text: #01CDFE;
  --accent: #05FFA1;
  --surface: #FFFB96;
}

$vaporwave-secondary: #FF71CE;
$vaporwave-primary: #B967FF;
$vaporwave-text: #01CDFE;
$vaporwave-accent: #05FFA1;
$vaporwave-surface: #FFFB96;

// tailwind.config.js — theme.extend.colors
colors: {
  'vaporwave': {
    'secondary': '#FF71CE',
    'primary': '#B967FF',
    'text': '#01CDFE',
    'accent': '#05FFA1',
    'surface': '#FFFB96',
  },
}

{
    "vaporwave": {
        "secondary": {
            "value": "#FF71CE",
            "type": "color"
        },
        "primary": {
            "value": "#B967FF",
            "type": "color"
        },
        "text": {
            "value": "#01CDFE",
            "type": "color"
        },
        "accent": {
            "value": "#05FFA1",
            "type": "color"
        },
        "surface": {
            "value": "#FFFB96",
            "type": "color"
        }
    }
}

{
    "secondary": "#FF71CE",
    "primary": "#B967FF",
    "text": "#01CDFE",
    "accent": "#05FFA1",
    "surface": "#FFFB96"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#FF71CE
#B967FF
#01CDFE
#05FFA1
#FFFB96

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Vaporwave

Contrast matrix

Export tokens

How the roles work

Related palettes