Palette

Ember Glow Hearth

Deep browns and fiery oranges mimic the comforting glow of a crackling campfire on a cool evening.

warmnatural5 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

#5A2C10#8A3D1C#C15E39#FF9D66#3B1C0B

Palette guide

How to use Ember Glow Hearth

Overview

The Ember Glow Hearth palette (ID: ember-glow-hearth) mimics the comforting glow of a crackling campfire on a cool evening. This collection features deep chocolate brown (#5A2C10), rich burnt orange (#8A3D1C), warm copper (#C15E39), glowing peach (#FF9D66), and very dark brown (#3B1C0B). It's an ideal choice for designs that aim to convey warmth, coziness, and a natural, rustic charm. Designers and developers can leverage these harmonious hues to create inviting branding, comfortable digital experiences, or serene editorial layouts. The smooth transition from deep, grounding tones to soft, airy accents allows for versatile application and a visually appealing sense of comforting depth.

Best used for

Outdoor and camping brand identity
Autumn and winter seasonal campaigns
Cozy cafe or lodge branding
Nature-inspired digital art and illustrations
Lifestyle blogs focusing on comfort and warmth
Fireplace and outdoor living product promotions

Suggested color roles

primary

Very dark brown (#3B1C0B) or deep chocolate brown (#5A2C10) serves as an excellent foundational color for backgrounds or main content areas, conveying depth and warmth.

secondary

Rich burnt orange (#8A3D1C) or warm copper (#C15E39) are versatile for supporting content blocks, subheadings, or subtle gradients, adding inviting texture.

accent

Glowing peach (#FF9D66) offers a soft yet prominent accent, perfect for highlights, interactive elements, or a warm, comforting glow.

background

Very dark brown (#3B1C0B) creates a deep, cozy backdrop, allowing lighter tones to emerge with a comforting, ember-like glow.

text

For body text, use white or a very light cream on dark backgrounds for optimal readability. For headings or impactful statements, glowing peach (#FF9D66) provides excellent contrast against darker palette colors.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing #C15E39 with #FF9D66, which may have low contrast.
Prioritize using white or a very light cream for body text on dark backgrounds to meet WCAG contrast requirements.
Avoid using darker palette colors like #3B1C0B or #5A2C10 for text on very dark backgrounds due to readability issues.
Consider using larger font sizes for any text set in mid-tone browns/oranges to improve legibility.

Recommended combinations

Campfire Glow

Ideal for creating a deep, warm background gradient or layered UI elements that evoke the comforting heat of a campfire.

#3B1C0B · #5A2C10 · #8A3D1C

Ember Warmth

Excellent for calls-to-action, highlighted elements, or decorative flourishes that need to stand out with a radiant, comforting glow.

#5A2C10 · #FF9D66 · #C15E39

Rustic Blend

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

#8A3D1C · #C15E39 · #FF9D66

CSS variables

:root {
  --ember-glow-hearth-1: #5A2C10;
  --ember-glow-hearth-2: #8A3D1C;
  --ember-glow-hearth-3: #C15E39;
  --ember-glow-hearth-4: #FF9D66;
  --ember-glow-hearth-5: #3B1C0B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ember-glow-hearth": {
        1: "#5A2C10",
        2: "#8A3D1C",
        3: "#C15E39",
        4: "#FF9D66",
        5: "#3B1C0B",
      }
    }
  }
}

Hex values

Color 1#5A2C10

Color 2#8A3D1C

Color 3#C15E39

Color 4#FF9D66

Color 5#3B1C0B

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5.7:1AA

1.3:1Fail

1.5:1Fail

1.8:1Fail

3.7:1AA18

2:1Fail

2.7:1Fail

1.8:1Fail

2.1:1Fail

3.6:1AA18

5.7:1AA

3.7:1AA18

2.1:1Fail

7.6:1AAA

1.3:1Fail

2:1Fail

3.6:1AA18

7.6:1AAA

Similar palettes

More like Ember Glow Hearth

View all warm

Artisan Loaf Hearth

Barista's Brew Comfort