Palette

Warm Embers

Fiery reds and glowing oranges mimic the comforting, intense heat of a dying fire's smoldering embers.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Embers 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 Warm Embers.

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

Data visualization

#800000#B22222#CD5C5C#FFD700#FFA500

Palette guide

How to use Warm Embers

Overview

The Warm Embers palette captures the intense, comforting glow of a dying fire, featuring fiery reds and brilliant oranges alongside a touch of radiant gold. Deep #800000 and the robust #B22222 provide a powerful, passionate base, reminiscent of smoldering coals. The softer #CD5C5C adds a warm, inviting glow, while #FFA500 (bright orange) and #FFD700 (golden yellow) burst forth like lively flames. This palette is perfect for designs that aim to convey energy, warmth, passion, or a sense of cozy intensity.

Best used for

Restaurant and culinary branding (especially BBQ/spicy)
Event invitations (parties, celebrations)
Gaming interfaces and fantasy themes
Autumn and holiday season marketing
Branding for energetic or passionate causes
Warm, inviting blog or website themes

Suggested color roles

primary

#800000 for strong, impactful headings, brand logos, or a deep, powerful background.

secondary

#B22222 works well for subheadings, important call-to-action buttons, or accent panels.

accent

#FFA500 or #FFD700 for vibrant highlights, interactive elements, or to draw immediate attention.

background

#CD5C5C can be used for a warm, inviting background, or consider a very light cream/white for high contrast.

text

For optimal readability, use #800000 or a crisp black against a light background, or #FFD700 for headings on dark backgrounds.

Accessibility notes

Ensure #800000 or #B22222 has strong contrast with a very light background (e.g., white or near-white) for text.
Avoid using #CD5C5C or #FFA500 for small body text on light backgrounds due to low contrast.
#FFD700 will likely not provide sufficient contrast for text on any of the reds; use for accents only.
For interactive elements, ensure distinct hover/focus states, perhaps using #FFA500 against #800000.

Recommended combinations

Deep Fire

Powerful contrast for headers and highlights, with a secondary red for supporting elements.

#800000 · #FFD700 · #B22222

Glowing Heat

A vibrant, energetic blend for interactive UI elements, alerts, or striking visual features.

#B22222 · #FFA500 · #CD5C5C

Ember Warmth

Creates depth and inviting warmth, suitable for mood-setting backgrounds or sophisticated branding.

#800000 · #CD5C5C · #FFA500

CSS variables

:root {
  --warm-embers-1: #800000;
  --warm-embers-2: #B22222;
  --warm-embers-3: #CD5C5C;
  --warm-embers-4: #FFD700;
  --warm-embers-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-embers": {
        1: "#800000",
        2: "#B22222",
        3: "#CD5C5C",
        4: "#FFD700",
        5: "#FFA500",
      }
    }
  }
}

Hex values

Color 1#800000

Color 2#B22222

Color 3#CD5C5C

Color 4#FFD700

Color 5#FFA500

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

7.8:1AAA

5.5:1AA

1.6:1Fail

1.7:1Fail

4.8:1AA

3.4:1AA18

2.8:1Fail

1.7:1Fail

2.8:1Fail

2:1Fail

7.8:1AAA

4.8:1AA

2.8:1Fail

1.4:1Fail

5.5:1AA

3.4:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Warm Embers

Warm Embers

See it in context.

Ready when you are.

Built with Warm Embers.

How to use Warm Embers

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Fire

Glowing Heat

Ember Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Warm Embers