Back to palettes

Palette

Mossy Stone Pathway

The serene progression of a path through an old forest, covered in soft moss and weathered stones.

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

#4F6D6F#778899#5C4033#9BB18D#DBC5B0

Palette guide

How to use Mossy Stone Pathway

Overview

The "Mossy Stone Pathway" palette (ID: mossy-stone-pathway-2) captures the serene progression of a path through an old forest, blending cool greys and muted greens with warm earth tones. Featuring the calming #4F6D6F, the sturdy #778899, and the grounding #5C4033, this palette creates a balanced and natural aesthetic. Designers can use this collection to evoke a sense of history, tranquility, and organic beauty. Developers will find these hex codes ideal for building interfaces that require a rustic, established, or subtly sophisticated feel, with the lighter #DBC5B0 offering excellent contrast.

Best used for

  • Heritage site websites
  • Rustic interior design concepts
  • Eco-conscious product packaging
  • Outdoor lifestyle brands
  • Historical fiction book covers
  • Nature-themed educational content

Suggested color roles

primary

#4F6D6F serves as a calming, foundational blue-green, suitable for main sections.

secondary

#778899 provides a solid, neutral grey, excellent for structural elements or supporting content.

accent

#5C4033 offers a rich, earthy brown for warmth and key interactive elements.

background

#DBC5B0 creates a light, inviting base that allows the deeper tones to stand out.

text

For light backgrounds, #4F6D6F or #5C4033 provides good readability. For dark elements, use white.

Accessibility notes

  • Ensure strong contrast between #5C4033 text and #DBC5B0 background.
  • Avoid using #9BB18D text on backgrounds like #DBC5B0 due to insufficient contrast.
  • Interactive elements should have clear hover and focus states for usability.
  • Always check color contrast for text and important UI elements using a WCAG tool.

Recommended combinations

Forest Trail

A balanced, earthy trio for main content, blending cool and warm tones naturally.

#4F6D6F · #778899 · #5C4033

Stone & Moss

Creates a lighter, airier feel, ideal for backgrounds and subtle accents.

#778899 · #9BB18D · #DBC5B0

Earthy Path

Highlights the warm brown against a light background, with a cool green accent.

#5C4033 · #DBC5B0 · #4F6D6F

CSS variables

:root {
  --mossy-stone-pathway-2-1: #4F6D6F;
  --mossy-stone-pathway-2-2: #778899;
  --mossy-stone-pathway-2-3: #5C4033;
  --mossy-stone-pathway-2-4: #9BB18D;
  --mossy-stone-pathway-2-5: #DBC5B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-stone-pathway-2": {
        1: "#4F6D6F",
        2: "#778899",
        3: "#5C4033",
        4: "#9BB18D",
        5: "#DBC5B0",
      }
    }
  }
}

Related searches

mossy grey green palettenatural pathway colorsrustic stone color schemeearthy and cool tonestranquil nature branding

Palette colors

Hex values

Color 1#4F6D6F
·
Color 2#778899
·
Color 3#5C4033
·
Color 4#9BB18D
·
Color 5#DBC5B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.7:1Fail
2.4:1Fail
3.4:1AA18
2
1.5:1Fail
2.6:1Fail
1.6:1Fail
2.2:1Fail
3
1.7:1Fail
2.6:1Fail
4.1:1AA18
5.6:1AA
4
2.4:1Fail
1.6:1Fail
4.1:1AA18
1.4:1Fail
5
3.4:1AA18
2.2:1Fail
5.6:1AA
1.4:1Fail

Similar palettes

More like Mossy Stone Pathway

View all Earth
Mossy Stone Pathway
Ceramic Glaze River
Bohemian Earth Loom
Whispering Grass Fields
Desert Mesa Clay
Deserted Ruin Twilight