Palette

Cozy Hearth Ember

Inviting shades that capture the comforting warmth and gentle glow of a flickering hearth ember.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8D3C2D#C6624C#EB937D#F2D2BF#6E2F23

Palette guide

How to use Cozy Hearth Ember

Overview

The Cozy Hearth Ember palette captures the inviting warmth and gentle glow of a flickering hearth, making it perfect for designs that aim for comfort and natural elegance. Its range moves from the deep, grounding #6E2F23 to the soft, airy #F2D2BF. Designers can utilize #8D3C2D for robust elements and #C6624C to introduce a vibrant yet earthy mid-tone. The delicate #EB937D serves as an excellent accent, providing a subtle warmth. This palette is highly versatile for creating engaging, welcoming environments, whether in digital interfaces, branding, or physical spaces, evoking a sense of home and autumn tranquility.

Best used for

Autumn-themed wedding invitations or event branding
Cozy cafe or bakery websites
Interior design for living rooms or studies
Product packaging for natural or artisanal goods
Blogging platforms focused on lifestyle or home
Branding for independent craft businesses

Suggested color roles

primary

Use #8D3C2D for main sections and prominent typography, establishing a warm and stable foundation.

secondary

Employ #C6624C for calls to action, important details, or illustrations, providing a lively yet earthy contrast.

accent

Utilize #EB937D or #F2D2BF for subtle highlights, background textures, or hover states, adding a soft, inviting touch.

background

The lightest shade, #F2D2BF, is excellent for a soft, warm background. For a deeper, more enveloping feel, consider #6E2F23.

text

On light backgrounds, #6E2F23 or a dark charcoal offers superior readability. For dark backgrounds, white or a very light cream is recommended.

Accessibility notes

Ensure sufficient contrast between #EB937D and #F2D2BF if used together for text or important elements.
Text set in #6E2F23 requires light-colored text (e.g., white or #F2D2BF) for accessibility.
Avoid low-contrast combinations like #EB937D on #C6624C for small font sizes.
Regularly check contrast ratios to comply with WCAG 2.1 guidelines for all textual content.

Recommended combinations

Hearth Glow

For a rich, deep base with a vibrant mid-tone and a soft, warm highlight.

#6E2F23 · #C6624C · #EB937D

Autumn Comfort

Ideal for creating a sense of natural, grounded warmth in branding or web design.

#8D3C2D · #F2D2BF · #6E2F23

Soft Ember

Excellent for subtle gradients or layering where a gentle, comforting transition is desired.

#C6624C · #EB937D · #F2D2BF

CSS variables

:root {
  --cozy-hearth-ember-1: #8D3C2D;
  --cozy-hearth-ember-2: #C6624C;
  --cozy-hearth-ember-3: #EB937D;
  --cozy-hearth-ember-4: #F2D2BF;
  --cozy-hearth-ember-5: #6E2F23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cozy-hearth-ember": {
        1: "#8D3C2D",
        2: "#C6624C",
        3: "#EB937D",
        4: "#F2D2BF",
        5: "#6E2F23",
      }
    }
  }
}

Hex values

Color 1#8D3C2D

Color 2#C6624C

Color 3#EB937D

Color 4#F2D2BF

Color 5#6E2F23

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

5.2:1AA

1.3:1Fail

1.9:1Fail

1.7:1Fail

2.8:1Fail

2.5:1Fail

3.2:1AA18

1.7:1Fail

1.6:1Fail

4.3:1AA18

5.2:1AA

2.8:1Fail

1.6:1Fail

7:1AAA

1.3:1Fail

2.5:1Fail

4.3:1AA18

7:1AAA

Similar palettes

More like Cozy Hearth Ember

View all warm

Hearth Ember Glow

Rustic Fireplace Warmth

Warm Hearthstone Ember

Autumn Cider Spice

Autumn Cider Spill

Autumn Cider Sunset