Palette

Warm Hearth

Deep, inviting reds and comforting browns bring to mind the cozy glow of a crackling fireplace.

WarmCalm5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#800000#A52A2A#B22222#CD5C5C#DEB887

Palette guide

How to use Warm Hearth

Overview

The Warm Hearth palette captures the cozy glow of a crackling fireplace with its deep, inviting reds and comforting browns. Rich #800000 (maroon) and #B22222 (firebrick) provide a profound, stable base, reminiscent of smoldering embers. The softer #A52A2A (brownish red) and #CD5C5C (indian red) add layers of warmth and gentle light. The creamy #DEB887 (burly wood) serves as a soft, rustic neutral, making this palette ideal for designs that aim to convey warmth, comfort, and a timeless, inviting atmosphere, especially suited for autumn themes.

Best used for

Rustic cabin or lodge branding
Autumn-themed event invitations
Cozy bookstore or cafe websites
Home decor and textile e-commerce
Holiday season marketing materials
Lifestyle blogs with a focus on comfort

Suggested color roles

primary

#800000 for strong brand elements, headers, or deep accent features, providing a stable, rich foundation.

secondary

#B22222 works well for supporting sections, call-to-action buttons, or darker text against lighter backgrounds.

accent

#A52A2A provides a warm, inviting highlight, perfect for interactive elements or subtle visual cues.

background

#DEB887 serves as a soft, neutral base, ideal for main content areas or a gentle overall canvas.

text

For primary text, #800000 or a deep charcoal ensures high readability against #DEB887.

Accessibility notes

Ensure #800000 or #B22222 has sufficient contrast with #DEB887 for body text (WCAG AA requires 4.5:1).
Avoid using #A52A2A or #CD5C5C for small text on #DEB887 backgrounds due to potential low contrast.
Use #800000 for important UI elements (icons, links) if the background is #DEB887 to ensure visibility.
Headings in #B22222 or #A52A2A against #DEB887 may pass AA for large text, but always verify.

Recommended combinations

Ember & Wood

High-contrast pairing for main content, with a warm red for buttons or highlights.

#800000 · #DEB887 · #B22222

Cozy Layers

A harmonious blend for layered designs, secondary sections, or subtle branding elements.

#A52A2A · #CD5C5C · #DEB887

Rustic Depth

Creates depth and richness for dark-themed interfaces or sophisticated visual storytelling.

#800000 · #B22222 · #A52A2A

CSS variables

:root {
  --warm-hearth-1: #800000;
  --warm-hearth-2: #A52A2A;
  --warm-hearth-3: #B22222;
  --warm-hearth-4: #CD5C5C;
  --warm-hearth-5: #DEB887;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-hearth": {
        1: "#800000",
        2: "#A52A2A",
        3: "#B22222",
        4: "#CD5C5C",
        5: "#DEB887",
      }
    }
  }
}

Hex values

Color 1#800000

Color 2#A52A2A

Color 3#B22222

Color 4#CD5C5C

Color 5#DEB887

Accessibility

Contrast checker

1.5:1Fail

1.6:1Fail

2.8:1Fail

5.9:1AA

1.5:1Fail

1.1:1Fail

1.8:1Fail

3.8:1AA18

1.6:1Fail

1.1:1Fail

1.7:1Fail

3.6:1AA18

2.8:1Fail

1.8:1Fail

1.7:1Fail

2.1:1Fail

5.9:1AA

3.8:1AA18

3.6:1AA18

2.1:1Fail

Similar palettes

More like Warm Hearth

Harvest Sundown Hearth