Back to palettes

Palette

Stone Garden Path

Subtle and grounded, reflecting the calming, weathered shades of a natural stone garden path.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A9A9A9#C0C0C0#D3D3D3#EAEAEA

Palette guide

How to use Stone Garden Path

Overview

The Stone Garden Path palette presents subtle and grounded tones, reflecting the calming, weathered shades of a natural stone garden path. This collection features a harmonious range of grays, from the gentle slate of #778899 to the airy lightness of #EAEAEA, with balanced mid-tones like #A9A9A9, #C0C0C0, and #D3D3D3. It's an excellent choice for designers and developers seeking to convey natural elegance, tranquility, and understated sophistication. Ideal for projects related to landscaping, eco-friendly brands, or minimalist digital interfaces. The inherent harmony of these grays ensures a timeless and versatile foundation, perfect for creating clean, inviting, and professional visual experiences.

Best used for

  • Landscaping and garden design websites
  • Eco-friendly product branding
  • Minimalist photography portfolios
  • Home decor and interior design apps
  • Nature-inspired digital publications
  • Subtle and elegant UI elements

Suggested color roles

primary

#778899 - A soft, muted slate gray that provides a grounded and natural foundation for main content blocks or primary brand elements.

secondary

#A9A9A9 - A balanced mid-gray that complements the primary, offering gentle contrast for subheadings, borders, or secondary information.

accent

#C0C0C0 - A slightly lighter gray that can be used for subtle highlights or decorative elements, adding a touch of understated elegance.

background

#EAEAEA - A very light, almost off-white gray that creates a clean, expansive, and subtle background for pages and content areas.

text

#778899 - This muted slate offers good readability against lighter grays like #EAEAEA or #D3D3D3, providing a soft yet clear text color.

Accessibility notes

  • Ensure sufficient contrast when using #D3D3D3 for text on #EAEAEA; use darker grays for readability.
  • Pair #778899 or #A9A9A9 with #EAEAEA or #D3D3D3 for optimal text readability.
  • For interactive elements, clearly differentiate states (e.g., hover, active) using distinct shades from the palette to enhance usability.
  • Be mindful of contrast ratios for small text and icons, as subtle gray differences can impact legibility for some users.

Recommended combinations

Path Foundation

Use #778899 for grounding headers, #EAEAEA as a clean background, and #A9A9A9 for primary content text, creating a natural and inviting layout.

#778899 · #EAEAEA · #A9A9A9

Garden Layers

Combine #A9A9A9 for main sections, #C0C0C0 for secondary panels, and #D3D3D3 for subtle borders or dividers, building visual depth.

#A9A9A9 · #C0C0C0 · #D3D3D3

Natural Contrast

Apply #C0C0C0 for prominent content blocks, #778899 for impactful text or UI elements, and #EAEAEA for spacious background areas.

#C0C0C0 · #778899 · #EAEAEA

CSS variables

:root {
  --stone-garden-path-1: #778899;
  --stone-garden-path-2: #A9A9A9;
  --stone-garden-path-3: #C0C0C0;
  --stone-garden-path-4: #D3D3D3;
  --stone-garden-path-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-garden-path": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#EAEAEA",
      }
    }
  }
}

Related searches

natural gray palettestone garden colorsminimalist neutral schemecalm earth tonessubtle cool grays

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#C0C0C0
·
Color 4#D3D3D3
·
Color 5#EAEAEA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.4:1Fail
3:1AA18
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
3
2:1Fail
1.3:1Fail
1.2:1Fail
1.5:1Fail
4
2.4:1Fail
1.6:1Fail
1.2:1Fail
1.2:1Fail
5
3:1AA18
2:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Stone Garden Path

View all neutral
Pebble Beach Stone
River Stone Whisper
Riverbend Stone
Ancient Roman Stone
Ancient Rune Stone
Ancient Temple Stones