Back to palettes

Palette

Mossy Stone Pathway

Muted greens and earthy browns evoke a tranquil, moss-covered stone path winding through an ancient forest.

Earthnatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mossy Stone Pathway 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 Mossy Stone Pathway.

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

Data visualization

#6B8E23#556B2F#708090#D2B48C#8B4513

Palette guide

How to use Mossy Stone Pathway

Overview

The "Mossy Stone Pathway" palette (ID: mossy-stone-pathway) evokes a tranquil, moss-covered stone path winding through an ancient forest. This palette combines the vibrant #6B8E23 with the grounding #556B2F, the steady #708090, and the warm #8B4513. Designers can leverage these muted greens, earthy browns, and soft greys to create designs that feel authentic, established, and naturally inviting. Developers will find these hex codes ideal for crafting digital experiences that convey a sense of heritage, stability, and a deep connection to nature, with #D2B48C offering a gentle highlight.

Best used for

  • Garden and landscaping businesses
  • Historical preservation websites
  • Eco-tourism marketing materials
  • Artisan food packaging
  • Outdoor living brand identities
  • Wellness and retreat centers

Suggested color roles

primary

#556B2F provides a deep, grounding green, excellent for foundational elements or robust sections.

secondary

#708090 offers a solid, neutral grey, ideal for structural elements or secondary information.

accent

#6B8E23 introduces a vibrant, lively green, perfect for calls to action or key interactive elements.

background

#D2B48C creates a warm, inviting backdrop that complements the natural tones.

text

For light backgrounds like #D2B48C, use #8B4513 or a dark charcoal. For darker elements, a crisp white.

Accessibility notes

  • Ensure sufficient contrast when using #556B2F text on #D2B48C background.
  • Avoid low-contrast combinations like #708090 text on #D2B48C background.
  • The vibrant #6B8E23 may require darker text for optimal readability.
  • Check WCAG compliance for all text and interactive elements.

Recommended combinations

Ancient Path

Creates a historical, grounded feel, using the lighter shade for readability.

#556B2F · #708090 · #D2B48C

Verdant Stone

Highlights the vibrant moss against the stone, suitable for feature elements.

#6B8E23 · #708090 · #556B2F

Earthy Trail

Emphasizes the warm brown and light earth tones, with a deep green accent.

#8B4513 · #D2B48C · #556B2F

CSS variables

:root {
  --mossy-stone-pathway-1: #6B8E23;
  --mossy-stone-pathway-2: #556B2F;
  --mossy-stone-pathway-3: #708090;
  --mossy-stone-pathway-4: #D2B48C;
  --mossy-stone-pathway-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-stone-pathway": {
        1: "#6B8E23",
        2: "#556B2F",
        3: "#708090",
        4: "#D2B48C",
        5: "#8B4513",
      }
    }
  }
}

Related searches

mossy green and brown paletteearthy stone colorsnatural heritage themerustic green grey brownancient forest palette

Palette colors

Hex values

Color 1#6B8E23
·
Color 2#556B2F
·
Color 3#708090
·
Color 4#D2B48C
·
Color 5#8B4513
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.1:1Fail
1.9:1Fail
1.9:1Fail
2
1.6:1Fail
1.5:1Fail
3:1AA18
1.2:1Fail
3
1.1:1Fail
1.5:1Fail
2.1:1Fail
1.8:1Fail
4
1.9:1Fail
3:1AA18
2.1:1Fail
3.6:1AA18
5
1.9:1Fail
1.2:1Fail
1.8:1Fail
3.6:1AA18

Similar palettes

More like Mossy Stone Pathway

View all Earth