What colors are in the Butter Yellow palette?

The Butter Yellow palette has 5 colors: #FFF6CC, #FCE38A, #F6D35B, #E4BC4A, #B8912F.

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 Butter Yellow palette accessible?

Its darkest and lightest colors have a contrast ratio of 2.71: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 Butter Yellow palette?

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

Surface #FFF6CC Lemon Chiffon Secondary #FCE38A Flax Primary #F6D35B Naples Yellow Accent #E4BC4A Honey Text #B8912F Caramel

Butter Yellow

5 colors

Open in generator All palettes

Surface Lemon Chiffon — #FFF6CC

Secondary Flax — #FCE38A

Primary Naples Yellow — #F6D35B

Accent Honey — #E4BC4A

Text Caramel — #B8912F

Contrast matrix

Text on Surface 2.71 Fail

Primary on Surface 1.34 Fail

Text on Secondary 2.31 Fail

Surface on Primary 1.34 Fail

Accent on Text 1.63 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: #FFF6CC;
  --secondary: #FCE38A;
  --primary: #F6D35B;
  --accent: #E4BC4A;
  --text: #B8912F;
}

$butter-yellow-surface: #FFF6CC;
$butter-yellow-secondary: #FCE38A;
$butter-yellow-primary: #F6D35B;
$butter-yellow-accent: #E4BC4A;
$butter-yellow-text: #B8912F;

// tailwind.config.js — theme.extend.colors
colors: {
  'butter-yellow': {
    'surface': '#FFF6CC',
    'secondary': '#FCE38A',
    'primary': '#F6D35B',
    'accent': '#E4BC4A',
    'text': '#B8912F',
  },
}

{
    "butter-yellow": {
        "surface": {
            "value": "#FFF6CC",
            "type": "color"
        },
        "secondary": {
            "value": "#FCE38A",
            "type": "color"
        },
        "primary": {
            "value": "#F6D35B",
            "type": "color"
        },
        "accent": {
            "value": "#E4BC4A",
            "type": "color"
        },
        "text": {
            "value": "#B8912F",
            "type": "color"
        }
    }
}

{
    "surface": "#FFF6CC",
    "secondary": "#FCE38A",
    "primary": "#F6D35B",
    "accent": "#E4BC4A",
    "text": "#B8912F"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#FFF6CC
#FCE38A
#F6D35B
#E4BC4A
#B8912F

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.

Butter Yellow

Contrast matrix

Export tokens

How the roles work

Related palettes