Back to palettes

Palette

Warm Hearthstone Ember

Invokes the cozy warmth and comforting glow of a crackling hearth, burning with rich, deep embers.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5D2D1D#8E3A24#C04B30#E06C4D#F2B4A2

Palette guide

How to use Warm Hearthstone Ember

Overview

The Warm Hearthstone Ember palette vividly captures the cozy warmth and comforting glow of a crackling hearth, burning with rich, deep embers. Starting with the profound #5D2D1D (a deep reddish-brown), it transitions through the earthy #8E3A24 and the vibrant #C04B30 (a rich terracotta). The palette lightens with the inviting #E06C4D (a soft coral-orange), culminating in the gentle, almost blush-like #F2B4A2. This collection is perfect for designs seeking a rustic, autumnal, and deeply comforting aesthetic with a touch of fiery warmth.

Best used for

  • Rustic wedding or event branding
  • Cozy cafe and bistro interiors
  • Autumn fashion or lifestyle brands
  • Home goods and textile design
  • Marketing for comfort-focused products
  • Storytelling websites with a warm, inviting tone

Suggested color roles

primary

#5D2D1D for strong, grounding elements like main navigation, footers, or impactful headings.

secondary

#8E3A24 works well for subheadings, important links, or background sections requiring a deeper tone.

accent

#C04B30 provides a vibrant, earthy highlight, suitable for interactive buttons or key information.

background

#F2B4A2 offers a light, airy canvas, perfect for main content areas, providing a soft contrast.

text

Use #5D2D1D or a dark charcoal for body text against #F2B4A2 to ensure optimal readability.

Accessibility notes

  • Ensure #5D2D1D or #8E3A24 has sufficient contrast with #F2B4A2 for all text to meet WCAG AA standards.
  • Avoid using #E06C4D or #C04B30 for small text on #F2B4A2 as contrast will likely be insufficient.
  • For interactive elements, ensure a clear focus state contrast, perhaps using #C04B30 on #F2B4A2.
  • Large headings in #E06C4D against #F2B4A2 might be acceptable, but always check contrast ratios.

Recommended combinations

Deep Ember Glow

High contrast for primary text and backgrounds, with a vibrant red-orange for accents or calls-to-action.

#5D2D1D · #F2B4A2 · #C04B30

Warm Terracotta

A softer, harmonious combination for layered UI elements, cards, or subtle content blocks.

#8E3A24 · #E06C4D · #F2B4A2

Rustic Gradient

Creates depth and warmth for sophisticated branding, dark mode themes, or elegant visual displays.

#5D2D1D · #C04B30 · #E06C4D

CSS variables

:root {
  --warm-hearthstone-ember-1: #5D2D1D;
  --warm-hearthstone-ember-2: #8E3A24;
  --warm-hearthstone-ember-3: #C04B30;
  --warm-hearthstone-ember-4: #E06C4D;
  --warm-hearthstone-ember-5: #F2B4A2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-hearthstone-ember": {
        1: "#5D2D1D",
        2: "#8E3A24",
        3: "#C04B30",
        4: "#E06C4D",
        5: "#F2B4A2",
      }
    }
  }
}

Related searches

rustic warm red palettecozy fire ember colorsautumn hearthstone huesnatural terracotta designcomforting brown orange scheme

Palette colors

Hex values

Color 1#5D2D1D
·
Color 2#8E3A24
·
Color 3#C04B30
·
Color 4#E06C4D
·
Color 5#F2B4A2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.5:1AA18
6.4:1AA
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
4.3:1AA18
3
2.3:1Fail
1.5:1Fail
1.5:1Fail
2.8:1Fail
4
3.5:1AA18
2.3:1Fail
1.5:1Fail
1.8:1Fail
5
6.4:1AA
4.3:1AA18
2.8:1Fail
1.8:1Fail

Similar palettes

More like Warm Hearthstone Ember

View all warm
Cozy Hearth Ember
Rustic Fireplace Warmth
Apple Grove Hearth
Autumn Foliage Ember
Autumn Harvest Berry
Autumn Harvest Hearth