What colors are in the Warm Editorial Brown palette?

The Warm Editorial Brown palette has 5 colors: #1A130E, #3E2D22, #A9683C, #D8B48C, #F6EEE2.

Where can I use this palette?

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

Is the Warm Editorial Brown palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.96: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 Warm Editorial Brown palette?

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

Text #1A130E Graphite Secondary #3E2D22 Bistre Primary #A9683C Ginger Accent #D8B48C Tan Surface #F6EEE2 Linen

Warm Editorial Brown

Editorial Long-form & print 5 colors

Built on paper and roasted browns, the way a printed magazine is. The clay tone is the only thing bright enough to be a link; everything else is there to be read, not clicked.

Open in generator All palettes

Text Graphite — #1A130E

Secondary Bistre — #3E2D22

Primary Ginger — #A9683C

Accent Tan — #D8B48C

Surface Linen — #F6EEE2

Contrast matrix

Text on Surface 15.96 AAA

Primary on Surface 3.86 AA Large

Text on Secondary 1.40 Fail

Surface on Primary 3.86 AA Large

Accent on Text 9.47 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: #1A130E;
  --secondary: #3E2D22;
  --primary: #A9683C;
  --accent: #D8B48C;
  --surface: #F6EEE2;
}

$warm-editorial-brown-text: #1A130E;
$warm-editorial-brown-secondary: #3E2D22;
$warm-editorial-brown-primary: #A9683C;
$warm-editorial-brown-accent: #D8B48C;
$warm-editorial-brown-surface: #F6EEE2;

// tailwind.config.js — theme.extend.colors
colors: {
  'warm-editorial-brown': {
    'text': '#1A130E',
    'secondary': '#3E2D22',
    'primary': '#A9683C',
    'accent': '#D8B48C',
    'surface': '#F6EEE2',
  },
}

{
    "warm-editorial-brown": {
        "text": {
            "value": "#1A130E",
            "type": "color"
        },
        "secondary": {
            "value": "#3E2D22",
            "type": "color"
        },
        "primary": {
            "value": "#A9683C",
            "type": "color"
        },
        "accent": {
            "value": "#D8B48C",
            "type": "color"
        },
        "surface": {
            "value": "#F6EEE2",
            "type": "color"
        }
    }
}

{
    "text": "#1A130E",
    "secondary": "#3E2D22",
    "primary": "#A9683C",
    "accent": "#D8B48C",
    "surface": "#F6EEE2"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1A130E
#3E2D22
#A9683C
#D8B48C
#F6EEE2

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.

Warm Editorial Brown

Contrast matrix

Export tokens

How the roles work

Related palettes