What colors are in the Amber Stage palette?

The Amber Stage palette has 5 colors: #1A140A, #3A2C14, #F0A020, #FFD37A, #FFF6E4.

Where can I use this palette?

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

Is the Amber Stage palette accessible?

Its darkest and lightest colors have a contrast ratio of 17.03:1. 6 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 Amber Stage palette?

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

Text #1A140A Graphite Secondary #3A2C14 Bistre Primary #F0A020 Marigold Accent #FFD37A Topaz Surface #FFF6E4 Old Lace

Amber Stage

Bold Campaigns & slides 5 colors

An amber built for slides and campaigns, bright enough to carry a headline three seconds from a cold visitor and warm enough not to read as a warning. The dark base gives all that heat somewhere to sit.

Open in generator All palettes

Text Graphite — #1A140A

Secondary Bistre — #3A2C14

Primary Marigold — #F0A020

Accent Topaz — #FFD37A

Surface Old Lace — #FFF6E4

Contrast matrix

Text on Surface 17.03 AAA

Primary on Surface 2.00 Fail

Text on Secondary 1.35 Fail

Surface on Primary 2.00 Fail

Accent on Text 12.93 AAA

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: #1A140A;
  --secondary: #3A2C14;
  --primary: #F0A020;
  --accent: #FFD37A;
  --surface: #FFF6E4;
}

$amber-stage-text: #1A140A;
$amber-stage-secondary: #3A2C14;
$amber-stage-primary: #F0A020;
$amber-stage-accent: #FFD37A;
$amber-stage-surface: #FFF6E4;

// tailwind.config.js — theme.extend.colors
colors: {
  'amber-stage': {
    'text': '#1A140A',
    'secondary': '#3A2C14',
    'primary': '#F0A020',
    'accent': '#FFD37A',
    'surface': '#FFF6E4',
  },
}

{
    "amber-stage": {
        "text": {
            "value": "#1A140A",
            "type": "color"
        },
        "secondary": {
            "value": "#3A2C14",
            "type": "color"
        },
        "primary": {
            "value": "#F0A020",
            "type": "color"
        },
        "accent": {
            "value": "#FFD37A",
            "type": "color"
        },
        "surface": {
            "value": "#FFF6E4",
            "type": "color"
        }
    }
}

{
    "text": "#1A140A",
    "secondary": "#3A2C14",
    "primary": "#F0A020",
    "accent": "#FFD37A",
    "surface": "#FFF6E4"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1A140A
#3A2C14
#F0A020
#FFD37A
#FFF6E4

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.

Amber Stage

Contrast matrix

Export tokens

How the roles work

Related palettes