Back to palettes

Palette

Woodland Moss Path

A gradient of soft, earthy greens that reflect the rich, velvety texture of moss lining a quiet forest path.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woodland Moss 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 Woodland Moss Path.

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

Data visualization

#2F3B20#5C6E40#8CA568#B9D793#DCE7C5

Palette guide

How to use Woodland Moss Path

Overview

The Woodland Moss Path palette presents a harmonious gradient of soft, earthy greens, capturing the essence of a quiet forest path. With deep tones like #2F3B20, mid-range greens such as #5C6E40 and #8CA568, and the bright, airy #DCE7C5, this palette offers versatility for natural and calming designs. Designers and developers can utilize these shades to create a feeling of organic depth and tranquility. The inclusion of #B9D793 provides a fresh accent, making it perfect for conveying growth and natural beauty in digital and print media.

Best used for

  • Environmental branding and campaigns
  • Sustainable living product design
  • Health and wellness app interfaces
  • Nature photography portfolio websites
  • Botanical garden promotional materials
  • Rustic or outdoor-themed event invitations

Suggested color roles

primary

#2F3B20 serves as a foundational deep forest green, ideal for headers, footers, or main structural elements.

secondary

#5C6E40 provides a rich, velvety moss tone, perfect for secondary navigation or content blocks.

accent

#B9D793 offers a fresh, vibrant highlight, suitable for calls to action or interactive elements.

background

#DCE7C5 acts as a soft, light canvas, ensuring content remains readable and the design feels open.

text

#2F3B20 is an excellent choice for primary body text due to its depth and clarity, or use charcoal for universal legibility.

Accessibility notes

  • Ensure #2F3B20 on #DCE7C5 meets WCAG AA for standard text contrast.
  • Verify contrast for #5C6E40 when used as text on lighter backgrounds like #DCE7C5.
  • Avoid using #DCE7C5 as text on white or very pale backgrounds due to potential low contrast.
  • For #8CA568 as text, ensure adequate contrast, especially on #DCE7C5, by checking WCAG guidelines.

Recommended combinations

Deep Moss

Creates a rich, layered natural depth for backgrounds or complex graphics.

#2F3B20 · #5C6E40 · #8CA568

Fresh Growth

Ideal for conveying freshness, light, and airy sections of a design.

#8CA568 · #B9D793 · #DCE7C5

Forest Canopy

A balanced combination for feature sections, blending depth with vibrancy.

#5C6E40 · #B9D793 · #2F3B20

CSS variables

:root {
  --woodland-moss-path-1: #2F3B20;
  --woodland-moss-path-2: #5C6E40;
  --woodland-moss-path-3: #8CA568;
  --woodland-moss-path-4: #B9D793;
  --woodland-moss-path-5: #DCE7C5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woodland-moss-path": {
        1: "#2F3B20",
        2: "#5C6E40",
        3: "#8CA568",
        4: "#B9D793",
        5: "#DCE7C5",
      }
    }
  }
}

Related searches

moss green color palettenatural woodland colorsearthy gradient schemeserene forest designorganic UI colors

Palette colors

Hex values

Color 1#2F3B20
·
Color 2#5C6E40
·
Color 3#8CA568
·
Color 4#B9D793
·
Color 5#DCE7C5
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
7.5:1AAA
9.2:1AAA
2
2.1:1Fail
2:1Fail
3.5:1AA18
4.3:1AA18
3
4.4:1AA18
2:1Fail
1.7:1Fail
2.1:1Fail
4
7.5:1AAA
3.5:1AA18
1.7:1Fail
1.2:1Fail
5
9.2:1AAA
4.3:1AA18
2.1:1Fail
1.2:1Fail

Similar palettes

More like Woodland Moss Path

View all earth
Emerald Canopy Hush
Mossy Woodland Glade
Enchanted Moss Garden
Forest Canopy
Forest Floor Moss
Forest Floor Moss