Palette

Forest Moss Trail

A calming blend of natural greens and muted tones, inspired by mossy trails and dappled forest light.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Moss Trail 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 Forest Moss Trail.

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

Data visualization

#3A5F4F#5D8A6A#8FBF9F#C2EAD0#2C4F3E

Palette guide

How to use Forest Moss Trail

Overview

The Forest Moss Trail palette offers a calming blend of natural greens and muted tones, inspired by mossy trails and dappled forest light. It features a deep, earthy green #3A5F4F, a softer mossy green #5D8A6A, a lighter, airy green #8FBF9F, a very pale, fresh green #C2EAD0, and a very deep, grounding green #2C4F3E. This harmonious collection of hex codes is ideal for designers seeking to evoke tranquility, natural beauty, and a sense of peaceful exploration. Developers can integrate these colors into wellness apps, eco-friendly branding, or serene web interfaces, ensuring a cohesive and inviting visual experience that feels both grounded and refreshing.

Best used for

Wellness and mindfulness app interfaces
Eco-conscious brand identity
Nature-themed photography websites
Sustainable fashion lookbooks
Organic product packaging
Relaxation and meditation content platforms

Suggested color roles

primary

#2C4F3E - A very deep, grounding green, perfect for primary branding elements, robust headers, or foundational content blocks, providing strong depth.

secondary

#3A5F4F - A deep, earthy green that works well for secondary content, navigation, or larger text, offering a natural grounding.

accent

#5D8A6A - A softer mossy green, ideal for subtle accents, interactive elements, or to draw attention without being overly bright.

background

#C2EAD0 - A very pale, fresh green that provides a clean, airy canvas, enhancing readability for darker text and maintaining a light, natural mood.

text

#2C4F3E - Excellent for body text on the light #C2EAD0 background, ensuring strong readability. A dark charcoal or black can also be used for maximum contrast.

Accessibility notes

Ensure #2C4F3E text on #C2EAD0 background meets WCAG AA contrast for readability, striving for AAA where possible.
Avoid using #8FBF9F or #5D8A6A for small text on #C2EAD0 as the contrast may be insufficient.
Use #5D8A6A for larger graphical elements or as a background for darker text to improve visibility.
Always verify contrast ratios for interactive elements, especially buttons and links, to guarantee accessibility.

Recommended combinations

Moss Trail Base

A fresh, readable combination for main content, with a light green background, very dark text, and a deep green for accents.

#C2EAD0 · #2C4F3E · #3A5F4F

Dappled Light

Creates a soft, layered feel for feature sections or complex data displays, blending muted greens.

#3A5F4F · #5D8A6A · #8FBF9F

Peaceful Contrast

A gentle yet clear combination for cards or testimonials, providing warmth and depth with natural tones.

#C2EAD0 · #5D8A6A · #2C4F3E

CSS variables

:root {
  --forest-moss-trail-1: #3A5F4F;
  --forest-moss-trail-2: #5D8A6A;
  --forest-moss-trail-3: #8FBF9F;
  --forest-moss-trail-4: #C2EAD0;
  --forest-moss-trail-5: #2C4F3E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-moss-trail": {
        1: "#3A5F4F",
        2: "#5D8A6A",
        3: "#8FBF9F",
        4: "#C2EAD0",
        5: "#2C4F3E",
      }
    }
  }
}

Hex values

Color 1#3A5F4F

Color 2#5D8A6A

Color 3#8FBF9F

Color 4#C2EAD0

Color 5#2C4F3E

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5.5:1AA

1.3:1Fail

1.8:1Fail

1.9:1Fail

3:1AA18

2.3:1Fail