What colors are in the Ember Glow palette?

The Ember Glow palette has 5 colors: #1A0D08, #7A1E12, #E8451F, #FF9E45, #FCE9CF.

Where can I use this palette?

It's a Vibrant palette — well suited to landing pages, social media graphics, creative branding, calls to action.

Is the Ember Glow palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.01: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 Ember Glow palette?

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

Text #1A0D08 Jet Black Secondary #7A1E12 Falu Red Primary #E8451F Cinnabar Accent #FF9E45 Sandy Brown Surface #FCE9CF Blanched Almond

Ember Glow

Bold Events & campaigns 5 colors

A fire gradient held together by a near-black base. High energy without turning into a warning label — the darkest tone gives the heat somewhere to sit.

Open in generator All palettes

Text Jet Black — #1A0D08

Secondary Falu Red — #7A1E12

Primary Cinnabar — #E8451F

Accent Sandy Brown — #FF9E45

Surface Blanched Almond — #FCE9CF

Contrast matrix

Text on Surface 16.01 AAA

Primary on Surface 3.34 AA Large

Text on Secondary 1.83 Fail

Surface on Primary 3.34 AA Large

Accent on Text 9.26 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: #1A0D08;
  --secondary: #7A1E12;
  --primary: #E8451F;
  --accent: #FF9E45;
  --surface: #FCE9CF;
}

$ember-glow-text: #1A0D08;
$ember-glow-secondary: #7A1E12;
$ember-glow-primary: #E8451F;
$ember-glow-accent: #FF9E45;
$ember-glow-surface: #FCE9CF;

// tailwind.config.js — theme.extend.colors
colors: {
  'ember-glow': {
    'text': '#1A0D08',
    'secondary': '#7A1E12',
    'primary': '#E8451F',
    'accent': '#FF9E45',
    'surface': '#FCE9CF',
  },
}

{
    "ember-glow": {
        "text": {
            "value": "#1A0D08",
            "type": "color"
        },
        "secondary": {
            "value": "#7A1E12",
            "type": "color"
        },
        "primary": {
            "value": "#E8451F",
            "type": "color"
        },
        "accent": {
            "value": "#FF9E45",
            "type": "color"
        },
        "surface": {
            "value": "#FCE9CF",
            "type": "color"
        }
    }
}

{
    "text": "#1A0D08",
    "secondary": "#7A1E12",
    "primary": "#E8451F",
    "accent": "#FF9E45",
    "surface": "#FCE9CF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1A0D08
#7A1E12
#E8451F
#FF9E45
#FCE9CF

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.

Ember Glow

Contrast matrix

Export tokens

How the roles work

Related palettes