What colors are in the Y2K Pop palette?

The Y2K Pop palette has 5 colors: #FF6EC7, #00E5FF, #B388FF, #FFD166, #7CFF6B.

Where can I use this palette?

It's a Vibrant palette — well suited to landing pages, social media graphics, creative branding, calls to action.

Is the Y2K Pop palette accessible?

Its darkest and lightest colors have a contrast ratio of 1.73: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 Y2K Pop palette?

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

Accent #FF6EC7 Neon Pink Text #00E5FF Bright Sky Surface #B388FF Heliotrope Secondary #FFD166 Naples Yellow Primary #7CFF6B Spring Green

Y2K Pop

5 colors

Open in generator All palettes

Accent Neon Pink — #FF6EC7

Text Bright Sky — #00E5FF

Surface Heliotrope — #B388FF

Secondary Naples Yellow — #FFD166

Primary Spring Green — #7CFF6B

Contrast matrix

Text on Surface 1.73 Fail

Primary on Surface 2.08 Fail

Text on Secondary 1.07 Fail

Surface on Primary 2.08 Fail

Accent on Text 1.64 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 {
  --accent: #FF6EC7;
  --text: #00E5FF;
  --surface: #B388FF;
  --secondary: #FFD166;
  --primary: #7CFF6B;
}

$y2k-pop-accent: #FF6EC7;
$y2k-pop-text: #00E5FF;
$y2k-pop-surface: #B388FF;
$y2k-pop-secondary: #FFD166;
$y2k-pop-primary: #7CFF6B;

// tailwind.config.js — theme.extend.colors
colors: {
  'y2k-pop': {
    'accent': '#FF6EC7',
    'text': '#00E5FF',
    'surface': '#B388FF',
    'secondary': '#FFD166',
    'primary': '#7CFF6B',
  },
}

{
    "y2k-pop": {
        "accent": {
            "value": "#FF6EC7",
            "type": "color"
        },
        "text": {
            "value": "#00E5FF",
            "type": "color"
        },
        "surface": {
            "value": "#B388FF",
            "type": "color"
        },
        "secondary": {
            "value": "#FFD166",
            "type": "color"
        },
        "primary": {
            "value": "#7CFF6B",
            "type": "color"
        }
    }
}

{
    "accent": "#FF6EC7",
    "text": "#00E5FF",
    "surface": "#B388FF",
    "secondary": "#FFD166",
    "primary": "#7CFF6B"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#FF6EC7
#00E5FF
#B388FF
#FFD166
#7CFF6B

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.

Y2K Pop

Contrast matrix

Export tokens

How the roles work

Related palettes