Back to palettes

Palette

Ember Glow Hearth

Glowing reds and oranges capture the comforting warmth and flickering dance of embers in a hearth.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ember Glow Hearth 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 Ember Glow Hearth.

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

Data visualization

#6B270F#9A401A#CD6D3C#EFA773#FFD7B6

Palette guide

How to use Ember Glow Hearth

Overview

The Ember Glow Hearth palette (ID: ember-glow-hearth-4) captures the comforting warmth and flickering dance of embers in a hearth. This collection features deep burnt orange (#6B270F), rich amber (#9A401A), warm terracotta (#CD6D3C), glowing peach (#EFA773), and soft cream (#FFD7B6). It's an ideal choice for designs that aim to convey coziness, natural warmth, and a gentle, inviting feel. Designers and developers can leverage these harmonious hues to create inviting branding, comfortable digital experiences, or serene editorial layouts. The smooth transition from deep, earthy tones to soft, airy accents allows for versatile application and a visually appealing sense of comforting depth.

Best used for

  • Autumn and harvest festival marketing materials
  • Home decor and interior design websites
  • Cozy cafe or bakery branding
  • Nature-inspired digital art and illustrations
  • Lifestyle blogs focusing on comfort and warmth
  • Candle and aromatic product packaging

Suggested color roles

primary

Deep burnt orange (#6B270F) or rich amber (#9A401A) serves as an excellent foundational color for backgrounds or main content areas, conveying depth and warmth.

secondary

Warm terracotta (#CD6D3C) or glowing peach (#EFA773) are versatile for supporting content blocks, subheadings, or subtle gradients, adding inviting texture.

accent

Soft cream (#FFD7B6) offers a gentle yet prominent accent, perfect for highlights, interactive elements, or a warm, comforting glow.

background

Soft cream (#FFD7B6) provides a light, airy, and cozy canvas, allowing darker tones to emerge with a comforting, ember-like glow.

text

Deep burnt orange (#6B270F) or rich amber (#9A401A) is the recommended color for body text on light backgrounds (#FFD7B6) for optimal readability. Warm terracotta (#CD6D3C) can be used for secondary text.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #EFA773 with #FFD7B6, which may have low contrast.
  • Always use #6B270F or #9A401A for body text on light backgrounds to meet WCAG contrast requirements.
  • Avoid using #CD6D3C or #EFA773 for small text sizes to maintain legibility.
  • Consider providing options for increased text size or bolding for critical information if mid-tone oranges are used.

Recommended combinations

Hearth Glow

Ideal for a clean, comforting look, using a light background with dark text and a warm terracotta for secondary elements or accents.

#FFD7B6 · #6B270F · #CD6D3C

Ember Layers

Excellent for creating subtle depth and layering in UI elements, background patterns, or elegant graphical compositions.

#9A401A · #CD6D3C · #EFA773

Autumn Blend

Perfect for creating harmonious content blocks or illustrations, offering a smooth transition of complementary warm orange tones.

#6B270F · #EFA773 · #FFD7B6

CSS variables

:root {
  --ember-glow-hearth-4-1: #6B270F;
  --ember-glow-hearth-4-2: #9A401A;
  --ember-glow-hearth-4-3: #CD6D3C;
  --ember-glow-hearth-4-4: #EFA773;
  --ember-glow-hearth-4-5: #FFD7B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ember-glow-hearth-4": {
        1: "#6B270F",
        2: "#9A401A",
        3: "#CD6D3C",
        4: "#EFA773",
        5: "#FFD7B6",
      }
    }
  }
}

Related searches

ember glow color schemecozy hearth designwarm orange brown paletterustic elegant colorsfireplace inspired palette

Palette colors

Hex values

Color 1#6B270F
·
Color 2#9A401A
·
Color 3#CD6D3C
·
Color 4#EFA773
·
Color 5#FFD7B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3:1AA18
5.4:1AA
8.1:1AAA
2
1.6:1Fail
1.9:1Fail
3.3:1AA18
5:1AA
3
3:1AA18
1.9:1Fail
1.8:1Fail
2.7:1Fail
4
5.4:1AA
3.3:1AA18
1.8:1Fail
1.5:1Fail
5
8.1:1AAA
5:1AA
2.7:1Fail
1.5:1Fail

Similar palettes

More like Ember Glow Hearth

View all warm