Palette

Rustic Hearth Stone

Evokes the cozy warmth of a rustic cabin, with aged wood, stone, and the comforting muted tones of woolen blankets.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A4035#7E5B4B#A1765D#CEAB8A#3A3F40

Palette guide

How to use Rustic Hearth Stone

Overview

The Rustic Hearth Stone palette offers a grounding collection of deep browns and warm grays, evoking the natural textures of stone, wood, and cozy textiles. With shades ranging from the rich #5A4035 and the deep #3A3F40 to the inviting #A1765D and the lighter #CEAB8A, this palette is robust and comforting. Developers will find clear distinctions for structuring content, while designers can leverage its earthy tones to create authentic, durable, and serene user experiences. The versatile #7E5B4B completes this harmonious set, ideal for conveying stability, natural beauty, and rustic charm.

Best used for

Outdoor adventure and wilderness brands
Rustic furniture and home goods design
Cabin rental and hospitality branding
Natural building materials and architecture
Historical preservation and heritage sites
Men's grooming products with an earthy feel

Suggested color roles

primary

Use the deep #3A3F40 or #5A4035 for strong, foundational elements like headers, footers, or primary navigation, providing a solid anchor.

secondary

Apply #7E5B4B to main content areas, subheadings, or card backgrounds for a rich, natural, and highly readable base.

accent

Highlight subtle details, decorative elements, or secondary calls to action with the warm #A1765D for a touch of inviting contrast.

background

The lightest shade, #CEAB8A, serves as an excellent warm, neutral background, providing ample space for darker text. Alternatively, #3A3F40 for dramatic dark mode.

text

For optimal readability, use a dark brown (like #5A4035) or charcoal on lighter backgrounds. White or cream text works exceptionally well on #3A3F40 and #5A4035.

Accessibility notes

Text on #CEAB8A will require a very dark text color for sufficient contrast to meet WCAG standards.
Ensure interactive elements have enough contrast against their background, especially with the lighter shades.
The darkest colors, #3A3F40 and #5A4035, provide excellent contrast for white or light-colored text.
Avoid pairing #A1765D with #7E5B4B for text/background without careful contrast checks.

Recommended combinations

Stone Foundation

Ideal for robust primary branding, headers, and key informational blocks, establishing a strong and grounded presence.

#3A3F40 · #5A4035 · #7E5B4B

Warm Wood

Excellent for clean backgrounds, secondary content, and subtle accents, creating an inviting and sophisticated feel.

#A1765D · #CEAB8A · #5A4035

Hearth Blend

Use for supporting elements, UI components, or visual hierarchy, offering gentle transitions and enhanced readability.

#7E5B4B · #A1765D · #3A3F40

CSS variables

:root {
  --rustic-hearth-stone-1: #5A4035;
  --rustic-hearth-stone-2: #7E5B4B;
  --rustic-hearth-stone-3: #A1765D;
  --rustic-hearth-stone-4: #CEAB8A;
  --rustic-hearth-stone-5: #3A3F40;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustic-hearth-stone": {
        1: "#5A4035",
        2: "#7E5B4B",
        3: "#A1765D",
        4: "#CEAB8A",
        5: "#3A3F40",
      }
    }
  }
}

Hex values

Color 1#5A4035

Color 2#7E5B4B

Color 3#A1765D

Color 4#CEAB8A

Color 5#3A3F40

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

4.4:1AA18

1.1:1Fail

1.6:1Fail

1.5:1Fail

2.8:1Fail

1.8:1Fail

2.4:1Fail

1.5:1Fail

1.9:1Fail

2.7:1Fail