Palette

Ancient Stone Hearth

Grounded tones reminiscent of an old stone fireplace, offering warmth and quiet strength.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#707070#3C3C3C#E0DED7#A8A8A8#8B4513

Palette guide

How to use Ancient Stone Hearth

Overview

The 'Ancient Stone Hearth' palette features grounded tones reminiscent of an old stone fireplace, offering warmth and quiet strength. With shades ranging from the deep #3C3C3C to the soft #E0DED7, and introducing a comforting #8B4513 (earthy brown), this neutral and rustic palette is perfect for designers and developers crafting inviting, calm, and historically resonant designs. It provides a harmonious blend of cool greys and warm browns, ideal for conveying comfort, heritage, and the cozy ambiance of a timeless gathering place in various digital and physical applications.

Best used for

Rustic interior design concepts
Cozy cafes and coffee shops
Heritage brands and artisanal crafts
Historical fiction settings
Comforting web interfaces and apps
Home and lifestyle blogs

Suggested color roles

primary

Utilize #707070 as a mid-tone, grounding grey for primary elements, offering a balanced and stable foundation.

secondary

Apply #A8A8A8 as a lighter, supporting grey for sections, subheadings, or subtle graphical accents, adding visual softness.

accent

Introduce #8B4513 as a warm, earthy brown accent for calls-to-action, important details, or decorative elements, providing a cozy touch.

background

Employ #E0DED7 as a soft, warm off-white background, offering a clean and expansive canvas with a comforting feel.

text

For optimal legibility, use #3C3C3C (a deep, charcoal-like grey) for all body text and headings, ensuring strong contrast against lighter backgrounds like #E0DED7.

Accessibility notes

Ensure #3C3C3C text on #E0DED7 background meets WCAG AA contrast standards for readability.
#8B4513 provides good contrast on #E0DED7 for headings and key information.
Avoid using #A8A8A8 for small text on #E0DED7 due to potential low contrast.
Verify contrast for interactive elements to ensure clear usability and accessibility.

Recommended combinations

Hearthside Glow

Creates a warm, comforting visual hierarchy suitable for prominent content blocks or inviting hero sections.

#3C3C3C · #8B4513 · #E0DED7

Stone Layers

Ideal for layered backgrounds, subtle gradients, or overlays that evoke textured stone surfaces.

#707070 · #A8A8A8 · #E0DED7

Rustic Comfort

A deep, earthy combination for titles, main navigation, and supporting informational graphics.

#8B4513 · #707070 · #3C3C3C

CSS variables

:root {
  --ancient-stone-hearth-1: #707070;
  --ancient-stone-hearth-2: #3C3C3C;
  --ancient-stone-hearth-3: #E0DED7;
  --ancient-stone-hearth-4: #A8A8A8;
  --ancient-stone-hearth-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-stone-hearth": {
        1: "#707070",
        2: "#3C3C3C",
        3: "#E0DED7",
        4: "#A8A8A8",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#707070

Color 2#3C3C3C

Color 3#E0DED7

Color 4#A8A8A8

Color 5#8B4513

Accessibility

Contrast checker

2.2:1Fail

3.7:1AA18

2.1:1Fail

1.4:1Fail

2.2:1Fail

8.2:1AAA

4.6:1AA

1.6:1Fail

3.7:1AA18

8.2:1AAA

1.8:1Fail

5.3:1AA