What colors are in the Candy Neon palette?

The Candy Neon palette has 5 colors: #FF006E, #FB5607, #FFBE0B, #8338EC, #3A86FF.

Where can I use this palette?

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

Is the Candy Neon palette accessible?

Its darkest and lightest colors have a contrast ratio of 1.10: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 Candy Neon palette?

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

Text #FF006E Rose Accent #FB5607 Neon Orange Secondary #FFBE0B Amber Primary #8338EC Blue Violet Surface #3A86FF Signal Blue

Candy Neon

5 colors

Open in generator All palettes

Text Rose — #FF006E

Accent Neon Orange — #FB5607

Secondary Amber — #FFBE0B

Primary Blue Violet — #8338EC

Surface Signal Blue — #3A86FF

Contrast matrix

Text on Surface 1.10 Fail

Primary on Surface 1.61 Fail

Text on Secondary 2.30 Fail

Surface on Primary 1.61 Fail

Accent on Text 1.18 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 {
  --text: #FF006E;
  --accent: #FB5607;
  --secondary: #FFBE0B;
  --primary: #8338EC;
  --surface: #3A86FF;
}

$candy-neon-text: #FF006E;
$candy-neon-accent: #FB5607;
$candy-neon-secondary: #FFBE0B;
$candy-neon-primary: #8338EC;
$candy-neon-surface: #3A86FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'candy-neon': {
    'text': '#FF006E',
    'accent': '#FB5607',
    'secondary': '#FFBE0B',
    'primary': '#8338EC',
    'surface': '#3A86FF',
  },
}

{
    "candy-neon": {
        "text": {
            "value": "#FF006E",
            "type": "color"
        },
        "accent": {
            "value": "#FB5607",
            "type": "color"
        },
        "secondary": {
            "value": "#FFBE0B",
            "type": "color"
        },
        "primary": {
            "value": "#8338EC",
            "type": "color"
        },
        "surface": {
            "value": "#3A86FF",
            "type": "color"
        }
    }
}

{
    "text": "#FF006E",
    "accent": "#FB5607",
    "secondary": "#FFBE0B",
    "primary": "#8338EC",
    "surface": "#3A86FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#FF006E
#FB5607
#FFBE0B
#8338EC
#3A86FF

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.

Candy Neon

Contrast matrix

Export tokens

How the roles work

Related palettes