Palette

Woodland Moss Path

Earthy greens and subtle browns evoking a peaceful, shaded path winding through a mossy woodland, quiet and profound.

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

#4B5320#6B8E23#8FBC8F#C1D5AE#3C421A

Palette guide

How to use Woodland Moss Path

Overview

The Woodland Moss Path palette, featuring deep forest greens and soft, earthy tones, evokes a serene natural environment. This collection of colors, including the grounding #4B5320, the vibrant moss of #6B8E23, and the light, airy #C1D5AE, offers a tranquil foundation for design projects. Developers and designers can leverage the rich contrast between the dark #3C421A and the brighter shades like #8FBC8F to create harmonious and legible interfaces. It's ideal for projects aiming to convey organic authenticity and peacefulness, reflecting the quiet beauty of a shaded, moss-covered woodland.

Best used for

Eco-friendly brand identity
Nature and outdoor-themed websites
Wellness and mindfulness applications
Sustainable product packaging
Interior design for calm spaces
Environmental non-profit campaigns

Suggested color roles

primary

#4B5320 serves as a deep, anchoring green, perfect for main branding elements or large sections.

secondary

#6B8E23 provides a vibrant, living moss tone, excellent for supporting visuals and calls to action.

accent

#8FBC8F acts as a soft, natural highlight, suitable for subtle details or interactive states.

background

#C1D5AE offers a light, serene base, creating an open and airy canvas.

text

#3C421A is a dark, highly legible green, ideal for primary body text, or use black for maximum contrast.

Accessibility notes

Ensure #3C421A provides sufficient contrast against #C1D5AE for body text (WCAG AA).
Use #4B5320 or #3C421A for text on lighter backgrounds like #C1D5AE.
Avoid using #8FBC8F or #C1D5AE for small text on similar light backgrounds.
Consider white or a very light cream for text on darker hues like #4B5320 or #6B8E23.

Recommended combinations

Deep Forest

Use for strong, grounded sections or layered natural imagery.

#3C421A · #4B5320 · #6B8E23

Mossy Glade

Ideal for softer, more ethereal sections, invoking light and growth.

#6B8E23 · #8FBC8F · #C1D5AE

Tranquil Path

A balanced trio for general UI, offering clear hierarchy and calm.

#4B5320 · #C1D5AE · #3C421A

CSS variables

:root {
  --woodland-moss-path-2-1: #4B5320;
  --woodland-moss-path-2-2: #6B8E23;
  --woodland-moss-path-2-3: #8FBC8F;
  --woodland-moss-path-2-4: #C1D5AE;
  --woodland-moss-path-2-5: #3C421A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woodland-moss-path-2": {
        1: "#4B5320",
        2: "#6B8E23",
        3: "#8FBC8F",
        4: "#C1D5AE",
        5: "#3C421A",
      }
    }
  }
}

Hex values

Color 1#4B5320

Color 2#6B8E23

Color 3#8FBC8F

Color 4#C1D5AE

Color 5#3C421A

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

5.2:1AA

1.3:1Fail

2.2:1Fail

1.8:1Fail

2.4:1Fail

2.8:1Fail

3.8:1AA18

1.8:1Fail

1.4:1Fail

4.9:1AA

5.2:1AA

2.4:1Fail

1.4:1Fail

6.7:1AA

1.3:1Fail

2.8:1Fail

4.9:1AA

6.7:1AA

Similar palettes

More like Woodland Moss Path

View all earth

Emerald Isle

Emerald Moss Canopy

Enchanted Forest Canopy

Enchanted Forest Glade

Enchanted Forest Glow

Enchanted Grove