Palette

Mystic Woodland Path

A hushed journey through deep, mossy greens and soft, earthy tones, like sunlight filtering through ancient trees.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B3D2B#5F775C#8D9E8B#B7BFA7#D9DFD0

Palette guide

How to use Mystic Woodland Path

Overview

The Mystic Woodland Path palette takes you on a hushed journey through deep, mossy greens and soft, earthy tones, like sunlight filtering through ancient trees. This natural and subtle collection features a grounding #2B3D2B, a rich #5F775C, and the very light, warm #D9DFD0. Designers can leverage the peaceful serenity of these hues to create inviting and organic experiences. The mid-tones like #8D9E8B and #B7BFA7 provide gentle transitions and subtle highlights, ensuring a cohesive and calming aesthetic. The full spectrum of #2B3D2B, #5F775C, #8D9E8B, #B7BFA7, and #D9DFD0 is ideal for projects seeking to convey natural beauty, tranquility, and a connection to the outdoors.

Best used for

Outdoor adventure and exploration brands
Botanical art and natural history exhibits
Sustainable living blogs and eco-conscious content
Yoga, meditation, or mindfulness app interfaces
Eco-friendly product packaging and marketing
Nature photography portfolios and travel guides

Suggested color roles

primary

Use #2B3D2B as the deep, grounding forest green for strong brand elements, primary navigation, or prominent text.

secondary

Employ #5F775C as a rich, mossy mid-tone for subheadings, secondary buttons, or larger graphic elements.

accent

Apply #8D9E8B for soft, natural highlights, interactive states, or subtle decorative touches.

background

Utilize #D9DFD0 as a light, warm, earthy base for main content areas, providing a clean and inviting canvas.

text

Set body text and important labels in #2B3D2B for crisp, readable text on lighter backgrounds like #D9DFD0.

Accessibility notes

The contrast between #2B3D2B and #D9DFD0 offers high readability for body text, meeting WCAG AA standards.
Ensure #5F775C on #D9DFD0 is suitable for larger text and prominent UI elements.
Avoid using #B7BFA7 or #8D9E8B for small text on #D9DFD0 due to insufficient contrast.
When using #5F775C as text on #8D9E8B for headings, ensure enough contrast to maintain readability.

Recommended combinations

Mossy Depths

Creates a strong, natural foundation for branding and clear content hierarchy.

#2B3D2B · #5F775C · #D9DFD0

Sun-dappled

Ideal for gentle, airy backgrounds and subtle UI elements, evoking sunlight.

#D9DFD0 · #B7BFA7 · #8D9E8B

Trail Marker

Provides clear hierarchy with subtle accents, suitable for informational designs.

#5F775C · #2B3D2B · #B7BFA7

CSS variables

:root {
  --mystic-woodland-path-1: #2B3D2B;
  --mystic-woodland-path-2: #5F775C;
  --mystic-woodland-path-3: #8D9E8B;
  --mystic-woodland-path-4: #B7BFA7;
  --mystic-woodland-path-5: #D9DFD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-woodland-path": {
        1: "#2B3D2B",
        2: "#5F775C",
        3: "#8D9E8B",
        4: "#B7BFA7",
        5: "#D9DFD0",
      }
    }
  }
}

Hex values

Color 1#2B3D2B

Color 2#5F775C

Color 3#8D9E8B

Color 4#B7BFA7

Color 5#D9DFD0

Accessibility

Contrast checker

2.4:1Fail

4.1:1AA18

6.1:1AA

8.5:1AAA

2.4:1Fail

1.7:1Fail

2.6:1Fail

3.6:1AA18

4.1:1AA18

1.7:1Fail

1.5:1Fail

2.1:1Fail