Palette

Mossy Forest Path

Inviting greens and soft yellows, mirroring the tranquil and lush environment of a moss-covered forest path.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mossy Forest 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 Mossy Forest Path.

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

Data visualization

#3D4D36#6C825D#9DBB87#BFDDA9#E5F3D1

Palette guide

How to use Mossy Forest Path

Overview

The Mossy Forest Path palette invites designers to explore the tranquil and lush environment of a moss-covered trail. Featuring the grounding #3D4D36 and the inviting #6C825D, it gracefully ascends through the gentle #9DBB87 and #BFDDA9, culminating in the serene, near-white #E5F3D1. This collection is ideal for creating designs that evoke calmness, growth, and natural beauty. Its harmonious blend of greens offers versatility for both subtle backgrounds and vibrant accents, making it perfect for applications requiring an organic, refreshing, and approachable feel. This palette helps convey a sense of peace and natural discovery, fitting for brands that prioritize well-being and environmental connection.

Best used for

Nature-inspired lifestyle blogs
Outdoor adventure gear branding
Health and wellness app design
Children's educational content
Botanical garden website design
Sustainable living product packaging

Suggested color roles

primary

Use #3D4D36 for strong anchors like footers, navigation, or primary calls to action, providing a deep, stable base.

secondary

Apply #6C825D for subheadings, key information blocks, or graphical elements, adding a soothing mid-tone.

accent

Employ #9DBB87 or #BFDDA9 for highlights, interactive elements, or illustrations, bringing freshness and vibrancy.

background

Utilize #E5F3D1 as a soft, luminous background for content, ensuring excellent readability and a spacious feel.

text

For primary body text, #3D4D36 offers excellent contrast on #E5F3D1, providing a natural, readable experience.

Accessibility notes

Ensure #3D4D36 text on #E5F3D1 background meets WCAG AA contrast standards.
Be cautious using #BFDDA9 for small text on #E5F3D1; reserve for larger titles or decorative elements.
Test interactive elements with #6C825D for sufficient contrast against various backgrounds.
Consider using a darker shade for hover states on lighter green buttons for better user feedback.

Recommended combinations

Forest Canopy

Creates a grounded, natural look for websites or print, with dark green as primary, olive as secondary, and light green as background.

#3D4D36 · #6C825D · #E5F3D1

Path & Light

Ideal for a fresh, inviting feel in UI design, using mid-green for content, lighter green for accents, and very light green for spaciousness.

#6C825D · #9DBB87 · #E5F3D1

Spring Growth

Offers a light, airy, and optimistic aesthetic, perfect for children's brands or health-related content, conveying freshness.

#9DBB87 · #BFDDA9 · #E5F3D1

CSS variables

:root {
  --mossy-forest-path-1: #3D4D36;
  --mossy-forest-path-2: #6C825D;
  --mossy-forest-path-3: #9DBB87;
  --mossy-forest-path-4: #BFDDA9;
  --mossy-forest-path-5: #E5F3D1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-forest-path": {
        1: "#3D4D36",
        2: "#6C825D",
        3: "#9DBB87",
        4: "#BFDDA9",
        5: "#E5F3D1",
      }
    }
  }
}

Hex values

Color 1#3D4D36

Color 2#6C825D

Color 3#9DBB87

Color 4#BFDDA9

Color 5#E5F3D1

Accessibility

Contrast checker

2.2:1Fail

4.3:1AA18

6.1:1AA

7.8:1AAA

2.2:1Fail

2:1Fail

2.8:1Fail

3.6:1AA18

4.3:1AA18

2:1Fail

1.4:1Fail

1.8:1Fail

6.1:1AA

2.8:1Fail

1.4:1Fail

1.3:1Fail

7.8:1AAA

3.6:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Mossy Forest Path

View all earth

Gentle Stream Pebbles

Mystical Forest Floor