Back to palettes

Palette

Weathered Stone Path

Textured grays and muted browns, evoking the timeless beauty of a well-trodden, weathered stone path.

neutralnatural5 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#B0C4DE#8C7B70#696969

Palette guide

How to use Weathered Stone Path

Overview

The Weathered Stone Path palette (ID: weathered-stone-path-2) offers a serene blend of textured grays and subtle earthy tones, reminiscent of an ancient, well-trodden pathway. Key shades include the versatile grey-blue #708090, the classic neutral #A9A9A9, and the grounding brown #8C7B70. A light, cool grey-blue, #B0C4DE, serves as an excellent background, while the deep #696969 provides strong contrast. This palette is perfect for designers seeking to evoke natural stability, historical charm, or a calm, grounded atmosphere. Developers can utilize its balanced range of values to build accessible interfaces with clear hierarchy and a sophisticated, organic feel.

Best used for

  • Landscape design and gardening websites
  • Historical documentaries and educational content
  • Nature-themed mobile applications
  • Artisanal craft brands (e.g., pottery, textiles)
  • Minimalist interior design concepts
  • Architectural and urban planning portfolios

Suggested color roles

primary

Use #708090 as a medium, versatile grey-blue for main content or stable elements.

secondary

Employ #A9A9A9 as a classic neutral grey for secondary navigation, subheadings, or backgrounds.

accent

Apply #8C7B70 for a warm, grounding brown in important highlights, buttons, or decorative details.

background

Utilize #B0C4DE as a light, cool grey-blue base for content areas, ensuring good readability.

text

Choose #696969 for primary body text, offering strong contrast and a readable, sophisticated grey.

Accessibility notes

  • Ensure #696969 text on #B0C4DE provides excellent contrast for all users.
  • Use white or very light text (e.g., #B0C4DE) on darker backgrounds like #696969 or #708090.
  • Avoid using #A9A9A9 text on #B0C4DE for small font sizes due to potential low contrast.
  • Test contrast ratios for all text and interactive elements, especially with mid-tone grays.

Recommended combinations

Stone & Earth

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

#696969 · #708090 · #8C7B70

Path Light

Offers an airy, subtle grey aesthetic, perfect for backgrounds and less prominent UI elements.

#B0C4DE · #A9A9A9 · #708090

Depth & Warmth

Provides a strong base with warm accents, suitable for emphasizing key information or calls-to-action.

#696969 · #8C7B70 · #A9A9A9

CSS variables

:root {
  --weathered-stone-path-2-1: #708090;
  --weathered-stone-path-2-2: #A9A9A9;
  --weathered-stone-path-2-3: #B0C4DE;
  --weathered-stone-path-2-4: #8C7B70;
  --weathered-stone-path-2-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-stone-path-2": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#8C7B70",
        5: "#696969",
      }
    }
  }
}

Related searches

weathered grey palettestone path colorsnatural neutral tonesearthy grey brownhistorical design colors

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#8C7B70
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
1:1Fail
1.4:1Fail
2
1.7:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
3
2.3:1Fail
1.3:1Fail
2.3:1Fail
3.1:1AA18
4
1:1Fail
1.7:1Fail
2.3:1Fail
1.4:1Fail
5
1.4:1Fail
2.3:1Fail
3.1:1AA18
1.4:1Fail

Similar palettes

More like Weathered Stone Path

View all neutral