Palette

Mystic Woodland Trail

Earthy greens and soft light tones evoke the peaceful serenity of a sun-dappled forest path.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Woodland 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 Mystic Woodland Trail.

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

Data visualization

#2D402B#577855#8BB386#C0DBBC#E0EEDF

Palette guide

How to use Mystic Woodland Trail

Overview

The Mystic Woodland Trail palette features earthy greens and soft light tones, evoking the peaceful serenity of a sun-dappled forest path. From the deep, grounding #2D402B to the very light, airy #E0EEDF, this palette is perfect for creating natural, calming, and inviting designs. Designers and developers can utilize the rich mid-tones like #577855 and #8BB386 to build a sense of gentle progression and warmth. The subtle #C0DBBC provides a soft transition, making the entire collection cohesive and easy on the eyes. The full spectrum of #2D402B, #577855, #8BB386, #C0DBBC, and #E0EEDF is ideal for projects that aim to convey a sense of natural beauty, tranquility, and an authentic connection to the outdoors.

Best used for

Outdoor lifestyle brands and adventure companies
Wellness and mindfulness apps or platforms
Nature-inspired home goods and decor
Organic food packaging and health product branding
Eco-conscious blogs and environmental advocacy
Tourist brochures for national parks and trails

Suggested color roles

primary

Designate #2D402B as the deep, grounding forest green for strong brand elements, headers, or primary calls-to-action.

secondary

Use #577855 as a rich, natural mid-green for supporting content, subheadings, or secondary UI elements.

accent

Apply #8BB386 for soft, vibrant green highlights, interactive states, or subtle decorative elements.

background

Employ #E0EEDF as a very light, airy, almost white-green base for main content areas, providing a fresh canvas.

text

Set body text and important labels in #2D402B for excellent readability against lighter backgrounds like #E0EEDF.

Accessibility notes

The contrast between #2D402B and #E0EEDF provides strong readability for body text, meeting WCAG AA standards.
Ensure #577855 on #E0EEDF is suitable for larger text and prominent UI elements.
Avoid using #C0DBBC or #8BB386 for small text on #E0EEDF due to insufficient contrast for readability.
When using #577855 as text on #8BB386 for headings, ensure enough contrast to maintain legibility.

Recommended combinations

Trailhead

Creates a clear, natural hierarchy for main sections and content, with strong visual anchors.

#2D402B · #577855 · #E0EEDF

Sunlit Path

Ideal for light, airy backgrounds and gentle accents, evoking a peaceful, open feel.

#E0EEDF · #C0DBBC · #8BB386

Forest Depth

Offers a balanced look with depth and subtle highlights, suitable for layered designs.

#577855 · #2D402B · #C0DBBC

CSS variables

:root {
  --mystic-woodland-trail-1: #2D402B;
  --mystic-woodland-trail-2: #577855;
  --mystic-woodland-trail-3: #8BB386;
  --mystic-woodland-trail-4: #C0DBBC;
  --mystic-woodland-trail-5: #E0EEDF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-woodland-trail": {
        1: "#2D402B",
        2: "#577855",
        3: "#8BB386",
        4: "#C0DBBC",
        5: "#E0EEDF",
      }
    }
  }
}

Hex values

Color 1#2D402B

Color 2#577855

Color 3#8BB386

Color 4#C0DBBC

Color 5#E0EEDF

Accessibility

Contrast checker

2.2:1Fail

4.7:1AA

7.5:1AAA

9.3:1AAA

2.2:1Fail

2.1:1Fail

3.3:1AA18

4.1:1AA18

4.7:1AA

2.1:1Fail

1.6:1Fail

2:1Fail

7.5:1AAA

3.3:1AA18

1.6:1Fail

1.2:1Fail

9.3:1AAA

4.1:1AA18

2:1Fail

1.2:1Fail

Similar palettes

More like Mystic Woodland Trail

View all earth

Enchanted Forest Canopy

Enchanted Forest Glow