Palette

Warm Stone Hearth

A comforting sequence of warm grays and soft beiges, reminiscent of a stone hearth radiating gentle warmth.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4646#7A7575#A6A09A#CFC8BF#9A9188

Palette guide

How to use Warm Stone Hearth

Overview

The Warm Stone Hearth palette offers a comforting sequence of warm grays and soft beiges, reminiscent of a stone hearth radiating gentle warmth. With hues ranging from the deep #4A4646 to the lighter, inviting #CFC8BF, this monochrome scheme provides a sophisticated and calming foundation for various design projects. Designers will appreciate the subtle variations in tone, ideal for creating layered textures and visual depth without overwhelming. Developers can leverage this consistent color family for intuitive UI elements, ensuring harmonious visual flow and a polished aesthetic. This palette is excellent for projects aiming for a minimal, rustic, or cozy ambiance.

Best used for

Minimalist website design
Cozy interior decor themes
Rustic branding and logos
Lifestyle and wellness apps
Sophisticated editorial layouts
Architectural visualization

Suggested color roles

primary

Use #7A7575 as a dominant color for main content blocks or significant UI elements, providing a balanced, warm gray.

secondary

Apply #A6A09A for supporting sections, subheadings, or secondary buttons, offering a lighter, gentle contrast.

accent

Utilize #9A9188 for subtle highlights, interactive states, or graphic accents to add a touch of warmth and distinction.

background

Employ #CFC8BF as a soft, warm background for main content areas, ensuring excellent readability with darker text.

text

The darkest shade, #4A4646, is ideal for primary body text, ensuring strong readability and a sophisticated tone on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between #4A4646 text and lighter backgrounds like #CFC8BF to meet WCAG AA standards.
Be cautious when pairing #A6A09A or #9A9188 for small text on similar mid-tone backgrounds; contrast may be insufficient.
For interactive elements, clearly define hover/focus states using a contrasting shade like #7A7575 to ensure usability.
Avoid using #CFC8BF for small text on light backgrounds, as contrast will be too low for readability.

Recommended combinations

Hearthstone Base

Excellent for creating clear visual hierarchy from light backgrounds to dark, prominent text or buttons.

#CFC8BF · #A6A09A · #4A4646

Gentle Layers

Ideal for subtle background variations, card elements, or layered UI components in a calming design.

#7A7575 · #9A9188 · #A6A09A

Solid Foundation

Use for robust backgrounds, accent borders, or to add gravitas and structure to design elements.

#4A4646 · #7A7575 · #CFC8BF

CSS variables

:root {
  --warm-stone-hearth-1: #4A4646;
  --warm-stone-hearth-2: #7A7575;
  --warm-stone-hearth-3: #A6A09A;
  --warm-stone-hearth-4: #CFC8BF;
  --warm-stone-hearth-5: #9A9188;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-stone-hearth": {
        1: "#4A4646",
        2: "#7A7575",
        3: "#A6A09A",
        4: "#CFC8BF",
        5: "#9A9188",
      }
    }
  }
}

Hex values

Color 1#4A4646

Color 2#7A7575

Color 3#A6A09A

Color 4#CFC8BF

Color 5#9A9188

Accessibility

Contrast checker

2.1:1Fail

3.6:1AA18

5.6:1AA

3:1AA18

2.1:1Fail

1.8:1Fail

2.7:1Fail

1.5:1Fail

3.6:1AA18

1.8:1Fail

1.6:1Fail

1.2:1Fail

5.6:1AA

2.7:1Fail

1.6:1Fail

1.9:1Fail

3:1AA18

1.5:1Fail

1.2:1Fail

1.9:1Fail

Similar palettes

More like Warm Stone Hearth

View all monochrome

Gravel Zen Meditations

Ancient Ruin Stone

Contemplative Stone Flow

Dusky Meadow Mist

Foggy Mountain Ascent

Grey Cloud Cascade