What colors are in the Crimson Editorial palette?

The Crimson Editorial palette has 5 colors: #1A0E0F, #3E1518, #B01E28, #D98A8A, #F4E9E4.

Where can I use this palette?

It's a Dark palette — well suited to dark mode, dashboards, gaming ui, hero sections.

Is the Crimson Editorial palette accessible?

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

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

Text #1A0E0F Jet Black Secondary #3E1518 Oxblood Primary #B01E28 Firebrick Accent #D98A8A Puce Surface #F4E9E4 Isabelline

Crimson Editorial

Editorial Magazines & long reads 5 colors

An oxblood-to-crimson spine on warm paper, the way a serious cover uses red. The bright crimson is a headline colour only; body text stays near-black.

Open in generator All palettes

Text Jet Black — #1A0E0F

Secondary Oxblood — #3E1518

Primary Firebrick — #B01E28

Accent Puce — #D98A8A

Surface Isabelline — #F4E9E4

Contrast matrix

Text on Surface 15.82 AAA

Primary on Surface 5.75 AA

Text on Secondary 1.19 Fail

Surface on Primary 5.75 AA

Accent on Text 7.14 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: #1A0E0F;
  --secondary: #3E1518;
  --primary: #B01E28;
  --accent: #D98A8A;
  --surface: #F4E9E4;
}

$crimson-editorial-text: #1A0E0F;
$crimson-editorial-secondary: #3E1518;
$crimson-editorial-primary: #B01E28;
$crimson-editorial-accent: #D98A8A;
$crimson-editorial-surface: #F4E9E4;

// tailwind.config.js — theme.extend.colors
colors: {
  'crimson-editorial': {
    'text': '#1A0E0F',
    'secondary': '#3E1518',
    'primary': '#B01E28',
    'accent': '#D98A8A',
    'surface': '#F4E9E4',
  },
}

{
    "crimson-editorial": {
        "text": {
            "value": "#1A0E0F",
            "type": "color"
        },
        "secondary": {
            "value": "#3E1518",
            "type": "color"
        },
        "primary": {
            "value": "#B01E28",
            "type": "color"
        },
        "accent": {
            "value": "#D98A8A",
            "type": "color"
        },
        "surface": {
            "value": "#F4E9E4",
            "type": "color"
        }
    }
}

{
    "text": "#1A0E0F",
    "secondary": "#3E1518",
    "primary": "#B01E28",
    "accent": "#D98A8A",
    "surface": "#F4E9E4"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1A0E0F
#3E1518
#B01E28
#D98A8A
#F4E9E4

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.

Crimson Editorial

Contrast matrix

Export tokens

How the roles work

Related palettes