Back to palettes

Palette

Weathered Stone Path

Subtle grays and muted tones of an ancient, weathered stone pathway.

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

#8F8C8A#A6A3A1#C7C5C4#6E6D6B#4A4948

Palette guide

How to use Weathered Stone Path

Overview

The Weathered Stone Path palette (ID: weathered-stone-path-3) provides a sophisticated range of subtle greys, reflecting the quiet beauty of an ancient, worn pathway. Anchored by the soft grey #8F8C8A, it is beautifully complemented by the slightly lighter #A6A3A1 and the almost-white #C7C5C4, which serves as an excellent background. The deep charcoal #4A4948 offers indispensable strong contrast for text and key elements. This palette is ideal for designers aiming for a minimalist, modern, or understated luxury aesthetic. Developers can leverage its harmonious tonal variations to create clean, highly readable, and accessible interfaces that exude calm and timeless elegance.

Best used for

  • Minimalist branding and corporate identity
  • Contemporary architecture and design studios
  • Urban planning and infrastructure presentations
  • Serene web interfaces and mobile apps
  • Luxury goods and high-end product showcases
  • Abstract art and photography portfolios

Suggested color roles

primary

Use #8F8C8A as a versatile, soft grey for main content or a sophisticated brand base.

secondary

Employ #A6A3A1 for slightly lighter, complementary elements, subheadings, or subtle backgrounds.

accent

Apply #6E6D6B for deeper, grounding grey accents in important text, icons, or graphical separators.

background

Utilize #C7C5C4 as a very light, clean base for content areas, ensuring excellent readability.

text

Choose #4A4948 for primary body text, offering strong legibility and a modern, charcoal feel.

Accessibility notes

  • Ensure #4A4948 text on #C7C5C4 provides excellent contrast for all users.
  • Use white or #C7C5C4 for text on darker backgrounds like #4A4948 or #6E6D6B.
  • Avoid using #A6A3A1 text on #C7C5C4 for small font sizes due to potential low contrast.
  • Test contrast ratios for all interactive elements, especially with the subtle variations of grey.

Recommended combinations

Grayscale Depth

Creates a strong, sophisticated, and layered grey hierarchy, ideal for headlines and main content.

#4A4948 · #6E6D6B · #8F8C8A

Subtle Path

Offers a light, airy, and minimalist aesthetic, perfect for backgrounds and subtle UI elements.

#C7C5C4 · #A6A3A1 · #8F8C8A

Modern Neutral

Provides strong contrast with balanced lightness, suitable for clear calls-to-action and distinct sections.

#4A4948 · #8F8C8A · #C7C5C4

CSS variables

:root {
  --weathered-stone-path-3-1: #8F8C8A;
  --weathered-stone-path-3-2: #A6A3A1;
  --weathered-stone-path-3-3: #C7C5C4;
  --weathered-stone-path-3-4: #6E6D6B;
  --weathered-stone-path-3-5: #4A4948;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-stone-path-3": {
        1: "#8F8C8A",
        2: "#A6A3A1",
        3: "#C7C5C4",
        4: "#6E6D6B",
        5: "#4A4948",
      }
    }
  }
}

Related searches

minimalist grey palettesubtle stone colorsmodern neutral schemecharcoal grey designcalm path tones

Palette colors

Hex values

Color 1#8F8C8A
·
Color 2#A6A3A1
·
Color 3#C7C5C4
·
Color 4#6E6D6B
·
Color 5#4A4948
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
1.5:1Fail
2.7:1Fail
2
1.3:1Fail
1.5:1Fail
2.1:1Fail
3.6:1AA18
3
1.9:1Fail
1.5:1Fail
3:1AA18
5.2:1AA
4
1.5:1Fail
2.1:1Fail
3:1AA18
1.7:1Fail
5
2.7:1Fail
3.6:1AA18
5.2:1AA
1.7:1Fail

Similar palettes

More like Weathered Stone Path

View all neutral