Palette

Scarlet Ember Dust

A fiery blend evoking the intense heat and dramatic glow of a sunset or burning embers.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Scarlet Ember Dust reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Scarlet Ember Dust.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#A20021#E52B50#F77F00#F0C808#6A0572

Palette guide

How to use Scarlet Ember Dust

Overview

The Scarlet Ember Dust palette is a fiery and dramatic blend, evoking the intense heat and glow of burning embers or a vibrant sunset. It combines a deep #A20021 (Crimson) and vivid #E52B50 (Radical Red) with the warmth of #F77F00 (Dark Orange) and #F0C808 (Golden Poppy), punctuated by a surprising #6A0572 (Tyrian Purple). This energetic and passionate palette is perfect for designers and developers aiming to create bold, dynamic, and memorable visual experiences. It’s excellent for projects that need to convey excitement, urgency, or a touch of theatrical flair, ensuring a strong emotional connection with the audience.

Best used for

High-energy entertainment websites
Bold and distinctive brand identities
Gaming interfaces and promotions
Festival and event branding
Packaging for spicy food or beverages
Fashion and avant-garde design projects

Suggested color roles

primary

#E52B50 (Radical Red) - A vibrant and eye-catching primary, excellent for hero sections, main calls-to-action, or key brand elements.

secondary

#A20021 (Crimson) - Provides a darker, grounding contrast, suitable for subheadings, footers, or background accents.

accent

#F77F00 (Dark Orange) - A fiery and energetic accent, perfect for interactive elements, highlights, or urgent notifications.

background

#F0C808 (Golden Poppy) - A bright and warm background color that brings a sunny, energetic base to content areas.

text

#333333 (dark charcoal) or #1C1717 (very dark brown) for body text on lighter backgrounds. #FFFFFF (white) is essential for text on #A20021, #E52B50, and #6A0572.

Accessibility notes

The vibrant reds and oranges require high contrast text; use white for readability on #A20021, #E52B50, and #6A0572.
Ensure sufficient contrast between adjacent colors, especially when using #F77F00 and #F0C808 near each other for important information.
For WCAG AA compliance, pair #F0C808 with a very dark text color like #333333 or #A20021.
The distinct #6A0572 can be used to differentiate key elements, but ensure its contrast with surrounding colors is adequate.

Recommended combinations

Fiery Callout

For a bright background with a striking headline and readable dark body text.

#F0C808 · #E52B50 · #A20021

Dramatic Button

An impactful call-to-action button with a vibrant hover state and clear white text.

#A20021 · #F77F00 · #E52B50

Bold Contrast

Creates a visually arresting combination for hero sections or distinct UI elements, leveraging the unique purple.

#6A0572 · #E52B50 · #F0C808

CSS variables

:root {
  --scarlet-ember-dust-1: #A20021;
  --scarlet-ember-dust-2: #E52B50;
  --scarlet-ember-dust-3: #F77F00;
  --scarlet-ember-dust-4: #F0C808;
  --scarlet-ember-dust-5: #6A0572;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "scarlet-ember-dust": {
        1: "#A20021",
        2: "#E52B50",
        3: "#F77F00",
        4: "#F0C808",
        5: "#6A0572",
      }
    }
  }
}

Hex values

Color 1#A20021

Color 2#E52B50

Color 3#F77F00

Color 4#F0C808

Color 5#6A0572

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

5.1:1AA

1.4:1Fail

1.9:1Fail

1.7:1Fail

2.7:1Fail

2.6:1Fail

3.1:1AA18

1.7:1Fail

1.6:1Fail

4.3:1AA18