Palette

Stone Hearth Warmth

Grounded and inviting, these tones evoke the comforting warmth of a rustic stone hearth.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C6A5A#AD8A79#CFC1B5#735C4D#9A7B6B

Palette guide

How to use Stone Hearth Warmth

Overview

The Stone Hearth Warmth palette features grounded and inviting earth tones, evoking the comforting warmth of a rustic stone hearth. This collection ranges from the deep, rich #735C4D and #8C6A5A, through the balanced #9A7B6B and #AD8A79, to the soft, gentle #CFC1B5. Designers and developers can leverage these comforting browns and warm greys to create digital and physical spaces that feel cozy, natural, and authentic. It's an excellent choice for projects requiring a rustic charm, a sense of home, or a connection to nature, ideal for lifestyle brands, artisanal products, or welcoming interfaces.

Best used for

Rustic interior design themes
Coffee shop or bakery branding
Sustainable fashion websites
Cozy blog or editorial layouts
Home decor e-commerce
Natural product packaging

Suggested color roles

primary

#8C6A5A - A warm, inviting brown, perfect for main content areas, headers, or prominent UI elements, conveying comfort and earthiness.

secondary

#AD8A79 - A lighter, softer brown, suitable for secondary information, subheadings, or background variations in cards or panels.

accent

#735C4D - The deepest, richest brown, ideal for strong calls to action, important icons, or to define borders with a grounding presence.

background

#CFC1B5 - A very light, creamy beige-brown that provides a soft, warm, and inviting canvas for content, gentler than stark white.

text

#735C4D - This deep, rich brown offers excellent contrast against #CFC1B5 or #AD8A79, ensuring optimal readability for all text elements with a natural feel.

Accessibility notes

Ensure text in #AD8A79 has sufficient contrast against #CFC1B5, especially for body text; check WCAG AA compliance.
The deepest shade, #735C4D, is crucial for primary text to ensure maximum readability on lighter backgrounds.
Avoid using #CFC1B5 for text, as it will lack sufficient contrast against any background in this palette.
For interactive elements, use distinct visual cues like bolder text or subtle outlines, especially when using mid-tones.

Recommended combinations

Rustic Base

Creates a warm, layered background for content, with #8C6A5A for inviting headings.

#CFC1B5 · #AD8A79 · #8C6A5A

Hearth Focus

Excellent for cards or panels, where #735C4D provides strong text on a light background with #AD8A79 for details.

#AD8A79 · #735C4D · #CFC1B5

Comforting Accents

Ideal for buttons or interactive elements, providing depth and warmth while maintaining clarity.

#8C6A5A · #9A7B6B · #735C4D

CSS variables

:root {
  --stone-hearth-warmth-1: #8C6A5A;
  --stone-hearth-warmth-2: #AD8A79;
  --stone-hearth-warmth-3: #CFC1B5;
  --stone-hearth-warmth-4: #735C4D;
  --stone-hearth-warmth-5: #9A7B6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-hearth-warmth": {
        1: "#8C6A5A",
        2: "#AD8A79",
        3: "#CFC1B5",
        4: "#735C4D",
        5: "#9A7B6B",
      }
    }
  }
}

Hex values

Color 1#8C6A5A

Color 2#AD8A79

Color 3#CFC1B5

Color 4#735C4D

Color 5#9A7B6B

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

2:1Fail

1.2:1Fail

2.8:1Fail

1.8:1Fail

3.5:1AA18

2.2:1Fail

1.3:1Fail

2:1Fail

3.5:1AA18

1.6:1Fail

1.3:1Fail

1.2:1Fail

2.2:1Fail

1.6:1Fail

Similar palettes

More like Stone Hearth Warmth

Stone Hearth Warmth

See it in context.

Ready when you are.

Built with Stone Hearth Warmth.

How to use Stone Hearth Warmth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rustic Base

Hearth Focus

Comforting Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Stone Hearth Warmth