What colors are in the Warm Editorial Neutrals palette?

The Warm Editorial Neutrals palette has 5 colors: #1B1714, #3F3129, #C46A3F, #E8D7C3, #FAF5EE.

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 Neutrals palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.42:1. 5 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 Neutrals palette?

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

Text #1B1714 Graphite Secondary #3F3129 Bistre Primary #C46A3F Chocolate Accent #E8D7C3 Bone Surface #FAF5EE Seashell

Warm Editorial Neutrals

Editorial Long-form reading 5 colors

Built around paper, not white. The clay accent only appears on pull quotes and links, so the page reads like print.

Open in generator All palettes

Text Graphite — #1B1714

Secondary Bistre — #3F3129

Primary Chocolate — #C46A3F

Accent Bone — #E8D7C3

Surface Seashell — #FAF5EE

Contrast matrix

Text on Surface 16.42 AAA

Primary on Surface 3.53 AA Large

Text on Secondary 1.43 Fail

Surface on Primary 3.53 AA Large

Accent on Text 12.67 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: #1B1714;
  --secondary: #3F3129;
  --primary: #C46A3F;
  --accent: #E8D7C3;
  --surface: #FAF5EE;
}

$warm-editorial-neutrals-text: #1B1714;
$warm-editorial-neutrals-secondary: #3F3129;
$warm-editorial-neutrals-primary: #C46A3F;
$warm-editorial-neutrals-accent: #E8D7C3;
$warm-editorial-neutrals-surface: #FAF5EE;

// tailwind.config.js — theme.extend.colors
colors: {
  'warm-editorial-neutrals': {
    'text': '#1B1714',
    'secondary': '#3F3129',
    'primary': '#C46A3F',
    'accent': '#E8D7C3',
    'surface': '#FAF5EE',
  },
}

{
    "warm-editorial-neutrals": {
        "text": {
            "value": "#1B1714",
            "type": "color"
        },
        "secondary": {
            "value": "#3F3129",
            "type": "color"
        },
        "primary": {
            "value": "#C46A3F",
            "type": "color"
        },
        "accent": {
            "value": "#E8D7C3",
            "type": "color"
        },
        "surface": {
            "value": "#FAF5EE",
            "type": "color"
        }
    }
}

{
    "text": "#1B1714",
    "secondary": "#3F3129",
    "primary": "#C46A3F",
    "accent": "#E8D7C3",
    "surface": "#FAF5EE"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1B1714
#3F3129
#C46A3F
#E8D7C3
#FAF5EE

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 Neutrals

Contrast matrix

Export tokens

How the roles work

Related palettes