What colors are in the Retail Autumn palette?

The Retail Autumn palette has 5 colors: #241611, #5B2A18, #B4501F, #E0904A, #F6E2C7.

Where can I use this palette?

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

Is the Retail Autumn palette accessible?

Its darkest and lightest colors have a contrast ratio of 13.88:1. 4 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 Retail Autumn palette?

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

Text #241611 Graphite Secondary #5B2A18 Espresso Primary #B4501F Rust Accent #E0904A Butterscotch Surface #F6E2C7 Champagne

Retail Autumn

Warm Seasonal campaigns 5 colors

A roasted sequence that holds together in print and on screen. The mid orange is the only CTA-grade tone.

Open in generator All palettes

Text Graphite — #241611

Secondary Espresso — #5B2A18

Primary Rust — #B4501F

Accent Butterscotch — #E0904A

Surface Champagne — #F6E2C7

Contrast matrix

Text on Surface 13.88 AAA

Primary on Surface 4.05 AA Large

Text on Secondary 1.49 Fail

Surface on Primary 4.05 AA Large

Accent on Text 6.89 AA

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: #241611;
  --secondary: #5B2A18;
  --primary: #B4501F;
  --accent: #E0904A;
  --surface: #F6E2C7;
}

$retail-autumn-text: #241611;
$retail-autumn-secondary: #5B2A18;
$retail-autumn-primary: #B4501F;
$retail-autumn-accent: #E0904A;
$retail-autumn-surface: #F6E2C7;

// tailwind.config.js — theme.extend.colors
colors: {
  'retail-autumn': {
    'text': '#241611',
    'secondary': '#5B2A18',
    'primary': '#B4501F',
    'accent': '#E0904A',
    'surface': '#F6E2C7',
  },
}

{
    "retail-autumn": {
        "text": {
            "value": "#241611",
            "type": "color"
        },
        "secondary": {
            "value": "#5B2A18",
            "type": "color"
        },
        "primary": {
            "value": "#B4501F",
            "type": "color"
        },
        "accent": {
            "value": "#E0904A",
            "type": "color"
        },
        "surface": {
            "value": "#F6E2C7",
            "type": "color"
        }
    }
}

{
    "text": "#241611",
    "secondary": "#5B2A18",
    "primary": "#B4501F",
    "accent": "#E0904A",
    "surface": "#F6E2C7"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#241611
#5B2A18
#B4501F
#E0904A
#F6E2C7

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.

Retail Autumn

Contrast matrix

Export tokens

How the roles work

Related palettes