Palette

Warm Hearth Stone

Earthy browns and warm beiges replicate the comforting warmth of an old stone fireplace.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#FAEBD7

Palette guide

How to use Warm Hearth Stone

Overview

The Warm Hearth Stone palette evokes the comforting warmth of an old stone fireplace, blending earthy browns with soft beiges. Deep tones like #8B4513 (saddle brown) and #A0522D (sienna) provide a grounded, rustic foundation. The inviting #CD853F (peru) adds a vibrant, yet natural, warmth. Lighter hues such as #D2B48C (tan) and the almost off-white #FAEBD7 (antique white) offer gentle contrast and a breathable canvas. This collection is ideal for designs aiming for a cozy, natural, and timeless aesthetic.

Best used for

Rustic home decor brands
Cozy cafe or bakery websites
Sustainable and artisan product lines
Autumnal marketing campaigns
Interior design mood boards
Lifestyle blogs focusing on comfort and home

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

For primary text, #8B4513 or a deep charcoal ensures high readability against #FAEBD7.

Accessibility notes

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

Recommended combinations

Hearthfire Glow

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

#8B4513 · #FAEBD7 · #CD853F

Stone & Sand

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

#A0522D · #D2B48C · #FAEBD7

Earthy Depths

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

#8B4513 · #A0522D · #CD853F

CSS variables

:root {
  --warm-hearth-stone-1: #8B4513;
  --warm-hearth-stone-2: #A0522D;
  --warm-hearth-stone-3: #CD853F;
  --warm-hearth-stone-4: #D2B48C;
  --warm-hearth-stone-5: #FAEBD7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-hearth-stone": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#FAEBD7",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD853F

Color 4#D2B48C

Color 5#FAEBD7

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.6:1AA18

6.1:1AA

1.3:1Fail

1.9:1Fail

2.8:1Fail

4.8:1AA

2.4:1Fail

1.9:1Fail

1.5:1Fail

2.6:1Fail

3.6:1AA18

2.8:1Fail

1.5:1Fail

1.7:1Fail

6.1:1AA

4.8:1AA

2.6:1Fail

1.7:1Fail

Similar palettes

More like Warm Hearth Stone

Terracotta Pot Warmth

Amber Apothecary Jar

Apple Grove Hearth