Back to palettes

Palette

Weathered Stone Path

Rough, textural tones of grey and earthy brown, like ancient, worn stone paving a forgotten path.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Weathered Stone Path 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 Weathered Stone Path.

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

Data visualization

#708090#A9A9A9#B8A890#8B4513#D2B48C

Palette guide

How to use Weathered Stone Path

Overview

The Weathered Stone Path palette (ID: weathered-stone-path) captures the raw, textural essence of ancient, worn paving with its blend of cool grays and earthy browns. Key shades include the stable grey #708090, the warm beige-brown #B8A890, and the rich, deep #8B4513. A light, sandy #D2B48C provides a warm, inviting background, while the robust #8B4513 ensures strong textual contrast. This palette is perfect for designers creating rustic, natural, or heritage-inspired projects. Developers will find its balanced warm and cool tones useful for crafting accessible interfaces that feel organic, grounded, and authentically timeless.

Best used for

  • Outdoor adventure and travel brands
  • Rustic home decor and furniture design
  • Natural food and organic product packaging
  • Historical sites and heritage tourism branding
  • Earthy and natural product websites
  • Minimalist design with a touch of warmth

Suggested color roles

primary

Use #708090 as a cool, stable grey for main content areas or a grounded brand presence.

secondary

Employ #B8A890 as a warm, inviting beige-brown for secondary elements, navigation, or backgrounds.

accent

Apply #8B4513 for rich, deep earthy brown accents in important text, buttons, or decorative details.

background

Utilize #D2B48C as a light, warm sandy base for content areas, ensuring good readability.

text

Choose #8B4513 for primary body text, offering strong contrast and a natural, grounded feel.

Accessibility notes

  • Ensure #8B4513 text on #D2B48C provides good contrast for readability.
  • Use white or very light text (e.g., #D2B48C) on darker backgrounds like #8B4513 or #708090.
  • Avoid using #B8A890 text on #D2B48C for small font sizes due to potential low contrast.
  • Test contrast ratios for all interactive elements, especially when mixing warm and cool mid-tones.

Recommended combinations

Earthy Ground

Creates a strong, natural, and balanced feel, ideal for headers and main content blocks.

#8B4513 · #708090 · #B8A890

Ancient Trail

Offers a lighter, subtle, and historic aesthetic, perfect for backgrounds and less prominent UI elements.

#D2B48C · #B8A890 · #A9A9A9

Rustic Contrast

Provides a warm accent on a light background with a cool grey, suitable for distinct sections or calls-to-action.

#8B4513 · #D2B48C · #708090

CSS variables

:root {
  --weathered-stone-path-1: #708090;
  --weathered-stone-path-2: #A9A9A9;
  --weathered-stone-path-3: #B8A890;
  --weathered-stone-path-4: #8B4513;
  --weathered-stone-path-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-stone-path": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#B8A890",
        4: "#8B4513",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

rustic stone paletteearthy grey brownancient path colorsnatural outdoor designtextured neutral scheme

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#B8A890
·
Color 4#8B4513
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.7:1Fail
1.8:1Fail
2.1:1Fail
2
1.7:1Fail
1:1Fail
3:1AA18
1.2:1Fail
3
1.7:1Fail
1:1Fail
3.1:1AA18
1.2:1Fail
4
1.8:1Fail
3:1AA18
3.1:1AA18
3.6:1AA18
5
2.1:1Fail
1.2:1Fail
1.2:1Fail
3.6:1AA18

Similar palettes

More like Weathered Stone Path

View all neutral