Back to palettes

Palette

Mossy River Stone

Gentle, muted greens and greys evoking smooth river stones adorned with soft, lush moss.

EarthNatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3F4F38#5B7252#7D9C71#A1C694#C7E3B6

Palette guide

How to use Mossy River Stone

Overview

The "Mossy River Stone" palette presents a collection of gentle, muted greens that beautifully evoke smooth river stones adorned with soft, lush moss. This harmonious gradient, from the deep #3F4F38 to the airy #C7E3B6, is ideal for designs that aim for a serene, organic, and refreshing feel. Designers can leverage these hex codes to craft calming visual experiences, while developers will find them perfect for building interfaces that require a subtle elegance and a strong connection to nature. The mid-tones like #7D9C71 provide excellent versatility for various design elements.

Best used for

  • Wellness and relaxation applications
  • Organic food branding
  • Eco-tourism websites
  • Nature-inspired art or photography
  • Sustainable fashion blogs
  • Minimalist UI designs

Suggested color roles

primary

#5B7252 offers a balanced, earthy green, perfect for main content areas and branding.

secondary

#3F4F38 provides a deeper, grounding tone, ideal for footers, navigation, or strong headings.

accent

#C7E3B6 acts as a soft, bright highlight, excellent for calls to action or subtle interactive elements.

background

#A1C694 or #C7E3B6 can serve as a light, natural background, promoting a sense of calm.

text

For light backgrounds, #3F4F38 or #5B7252 ensure excellent readability. For dark elements, a crisp white.

Accessibility notes

  • Ensure adequate contrast between #3F4F38 text and #C7E3B6 background.
  • Avoid low-contrast pairings like #A1C694 text on #C7E3B6 background due to very low contrast.
  • Interactive elements should have clear visual feedback for states (hover, focus).
  • Use contrast checkers to validate all text and interactive element pairings.

Recommended combinations

Gentle Gradient

Creates a smooth, natural transition, excellent for layered backgrounds or visual hierarchy.

#3F4F38 · #7D9C71 · #C7E3B6

Verdant Calm

A balanced trio for main content areas, providing depth and freshness.

#5B7252 · #A1C694 · #3F4F38

Mossy Highlight

Uses the lightest shade as a primary, with darker greens for supporting elements and text.

#C7E3B6 · #5B7252 · #7D9C71

CSS variables

:root {
  --mossy-river-stone-1: #3F4F38;
  --mossy-river-stone-2: #5B7252;
  --mossy-river-stone-3: #7D9C71;
  --mossy-river-stone-4: #A1C694;
  --mossy-river-stone-5: #C7E3B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-river-stone": {
        1: "#3F4F38",
        2: "#5B7252",
        3: "#7D9C71",
        4: "#A1C694",
        5: "#C7E3B6",
      }
    }
  }
}

Related searches

muted green color palettenatural serene colorsorganic moss colorsearthy green hex codestranquil nature design

Palette colors

Hex values

Color 1#3F4F38
·
Color 2#5B7252
·
Color 3#7D9C71
·
Color 4#A1C694
·
Color 5#C7E3B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
4.6:1AA
6.3:1AA
2
1.7:1Fail
1.7:1Fail
2.8:1Fail
3.8:1AA18
3
2.9:1Fail
1.7:1Fail
1.6:1Fail
2.2:1Fail
4
4.6:1AA
2.8:1Fail
1.6:1Fail
1.4:1Fail
5
6.3:1AA
3.8:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Mossy River Stone

View all Earth
Forest Whisper
Jade Forest Canopy
Ancient Forest Roots
Botanical Sketch Book
Deep Woods
Enchanted Forest Canopy