What colors are in the Retro Mustard palette?

The Retro Mustard palette has 5 colors: #3A2A17, #8A5A1E, #D9A521, #7E8B4E, #F1E7CE.

Where can I use this palette?

It's a Earthy palette — well suited to organic brands, food & craft, interiors, rustic & natural themes.

Is the Retro Mustard palette accessible?

Its darkest and lightest colors have a contrast ratio of 11.20:1. 3 color pairs in it meet WCAG AA 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 Retro Mustard palette?

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

Text #3A2A17 Bistre Accent #8A5A1E Brown Primary #D9A521 Goldenrod Secondary #7E8B4E Russian Green Surface #F1E7CE Champagne

Retro Mustard

Vintage 70s-inspired branding 5 colors

Mustard, rust and avocado — the 1970s recipe, rebalanced so the mustard can actually carry a button. Cream keeps it warm instead of muddy.

Open in generator All palettes

Text Bistre — #3A2A17

Accent Brown — #8A5A1E

Primary Goldenrod — #D9A521

Secondary Russian Green — #7E8B4E

Surface Champagne — #F1E7CE

Contrast matrix

Text on Surface 11.20 AAA

Primary on Surface 1.82 Fail

Text on Secondary 3.74 AA Large

Surface on Primary 1.82 Fail

Accent on Text 2.34 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: #3A2A17;
  --accent: #8A5A1E;
  --primary: #D9A521;
  --secondary: #7E8B4E;
  --surface: #F1E7CE;
}

$retro-mustard-text: #3A2A17;
$retro-mustard-accent: #8A5A1E;
$retro-mustard-primary: #D9A521;
$retro-mustard-secondary: #7E8B4E;
$retro-mustard-surface: #F1E7CE;

// tailwind.config.js — theme.extend.colors
colors: {
  'retro-mustard': {
    'text': '#3A2A17',
    'accent': '#8A5A1E',
    'primary': '#D9A521',
    'secondary': '#7E8B4E',
    'surface': '#F1E7CE',
  },
}

{
    "retro-mustard": {
        "text": {
            "value": "#3A2A17",
            "type": "color"
        },
        "accent": {
            "value": "#8A5A1E",
            "type": "color"
        },
        "primary": {
            "value": "#D9A521",
            "type": "color"
        },
        "secondary": {
            "value": "#7E8B4E",
            "type": "color"
        },
        "surface": {
            "value": "#F1E7CE",
            "type": "color"
        }
    }
}

{
    "text": "#3A2A17",
    "accent": "#8A5A1E",
    "primary": "#D9A521",
    "secondary": "#7E8B4E",
    "surface": "#F1E7CE"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#3A2A17
#8A5A1E
#D9A521
#7E8B4E
#F1E7CE

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.

Retro Mustard

Contrast matrix

Export tokens

How the roles work

Related palettes