What colors are in the Dopamine Brights palette?

The Dopamine Brights palette has 5 colors: #FF3B3B, #FF9F1C, #FFD23F, #2EC4B6, #3A86FF.

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 Dopamine Brights palette accessible?

Its darkest and lightest colors have a contrast ratio of 1.50: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 Dopamine Brights palette?

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

Surface #FF3B3B Coquelicot Accent #FF9F1C Orange Peel Secondary #FFD23F Sunglow Text #2EC4B6 Tiffany Blue Primary #3A86FF Signal Blue

Dopamine Brights

5 colors

Open in generator All palettes

Surface Coquelicot — #FF3B3B

Accent Orange Peel — #FF9F1C

Secondary Sunglow — #FFD23F

Text Tiffany Blue — #2EC4B6

Primary Signal Blue — #3A86FF

Contrast matrix

Text on Surface 1.63 Fail

Primary on Surface 1.02 Fail

Text on Secondary 1.50 Fail

Surface on Primary 1.02 Fail

Accent on Text 1.06 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 {
  --surface: #FF3B3B;
  --accent: #FF9F1C;
  --secondary: #FFD23F;
  --text: #2EC4B6;
  --primary: #3A86FF;
}

$dopamine-brights-surface: #FF3B3B;
$dopamine-brights-accent: #FF9F1C;
$dopamine-brights-secondary: #FFD23F;
$dopamine-brights-text: #2EC4B6;
$dopamine-brights-primary: #3A86FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'dopamine-brights': {
    'surface': '#FF3B3B',
    'accent': '#FF9F1C',
    'secondary': '#FFD23F',
    'text': '#2EC4B6',
    'primary': '#3A86FF',
  },
}

{
    "dopamine-brights": {
        "surface": {
            "value": "#FF3B3B",
            "type": "color"
        },
        "accent": {
            "value": "#FF9F1C",
            "type": "color"
        },
        "secondary": {
            "value": "#FFD23F",
            "type": "color"
        },
        "text": {
            "value": "#2EC4B6",
            "type": "color"
        },
        "primary": {
            "value": "#3A86FF",
            "type": "color"
        }
    }
}

{
    "surface": "#FF3B3B",
    "accent": "#FF9F1C",
    "secondary": "#FFD23F",
    "text": "#2EC4B6",
    "primary": "#3A86FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#FF3B3B
#FF9F1C
#FFD23F
#2EC4B6
#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.

Dopamine Brights

Contrast matrix

Export tokens

How the roles work

Related palettes