Palette

Mossy Undergrowth Depth

Capturing the rich, damp tones of a forest floor, where moss and earth create a deep, textured tapestry.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mossy Undergrowth Depth 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 Undergrowth Depth.

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

Data visualization

#3B3D2C#5C5E47#7A8068#979E89#2D2F20

Palette guide

How to use Mossy Undergrowth Depth

Overview

The Mossy Undergrowth Depth palette plunges into the rich, damp tones of a forest floor, offering a deeply natural and grounding aesthetic. This collection features a range of muted, earthy greens and charcoals, from the profound darkness of #2D2F20 to the subtle light of #979E89. Key colors like the dark moss green #3B3D2C and the slightly lighter #5C5E47 provide a foundation of organic depth. The palette is designed for projects that aim to convey a sense of rustic authenticity, quiet strength, and connection to raw nature. Its subdued contrasts are perfect for creating an immersive, tranquil, and sophisticated user experience across various design applications.

Best used for

eco-tourism branding
rustic home decor websites
outdoor apparel design
environmental non-profit materials
garden and landscape design portfolios
coffee shop branding

Suggested color roles

primary

Utilize #3B3D2C as a strong primary for large blocks or main navigation, establishing a deep, natural anchor.

secondary

Employ #5C5E47 for secondary elements, illustrations, or content panels, providing a slightly softer, yet still robust, green.

accent

Use #979E89 sparingly for subtle highlights or interactive states, offering a gentle lift without breaking the organic feel.

background

Apply #2D2F20 for a very dark, immersive background, or #979E89 for a light, natural canvas that allows darker elements to stand out.

text

For optimal readability, use a light color like #979E89 for text on dark backgrounds such as #2D2F20, or a charcoal for text on #979E89.

Accessibility notes

Ensure high contrast when pairing text with backgrounds, especially for smaller font sizes.
Using #979E89 for text on #2D2F20 or #3B3D2C provides good contrast for readability.
Avoid using #5C5E47 or #7A8068 for small text on #3B3D2C as contrast may be insufficient.
Consider white or a very light gray for critical text elements against the darkest tones.

Recommended combinations

Deep Forest

Excellent for dark mode interfaces or immersive landing pages, evoking a dense woodland feel.

#2D2F20 · #3B3D2C · #7A8068

Undergrowth Path

Ideal for content sections, with #979E89 as background, #5C5E47 for secondary content, and #3B3D2C for headings.

#979E89 · #5C5E47 · #3B3D2C

Mossy Accents

Suitable for data visualization or hierarchical information, offering subtle progression within natural greens.

#7A8068 · #979E89 · #5C5E47

CSS variables

:root {
  --mossy-undergrowth-depth-1: #3B3D2C;
  --mossy-undergrowth-depth-2: #5C5E47;
  --mossy-undergrowth-depth-3: #7A8068;
  --mossy-undergrowth-depth-4: #979E89;
  --mossy-undergrowth-depth-5: #2D2F20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-undergrowth-depth": {
        1: "#3B3D2C",
        2: "#5C5E47",
        3: "#7A8068",
        4: "#979E89",
        5: "#2D2F20",
      }
    }
  }
}

Hex values

Color 1#3B3D2C

Color 2#5C5E47

Color 3#7A8068

Color 4#979E89

Color 5#2D2F20

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4:1AA18

1.2:1Fail

1.7:1Fail

1.6:1Fail

2.4:1Fail

2:1Fail

2.7:1Fail

1.6:1Fail

1.5:1Fail

3.3:1AA18

4:1AA18

2.4:1Fail

1.5:1Fail

4.9:1AA

1.2:1Fail

2:1Fail

3.3:1AA18

4.9:1AA

Similar palettes

More like Mossy Undergrowth Depth

View all earth

Forest Path Tones

Ancient Clay Vessel

Ancient Earth Pigment

Ancient Forest Bark

Artisan Clay Glaze

Artisan Clay Texture