Palette

Forest Fern Pathway

Lush greens charting a verdant path through a deep, tranquil forest undergrowth.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Fern Pathway 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 Fern Pathway.

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

Data visualization

#1B4D2B#3D7A4D#60A770#8EC79C#C0E0C8

Palette guide

How to use Forest Fern Pathway

Overview

The Forest Fern Pathway palette charts a verdant course through lush greens, evoking the tranquil undergrowth of a deep forest. Featuring the profound #1B4D2B, a balanced #3D7A4D, and the inviting #60A770, this collection offers an organic and harmonious aesthetic. Designers can leverage these shades for nature-inspired branding, calming user interfaces, or sophisticated environmental reports. Developers will find these hex codes excellent for creating consistent, visually appealing experiences across various platforms. The inclusion of a soft #8EC79C and a very pale #C0E0C8 provides versatility for backgrounds and accents, ensuring a cohesive and refreshing design.

Best used for

Nature trail or park branding
Environmental education platforms
Gardening and botanical websites
Mindfulness and relaxation apps
Outdoor recreation marketing
Sustainable product packaging

Suggested color roles

primary

Use #1B4D2B (Deep Forest Green) as a strong, grounding main color for headers, key elements, or calls-to-action, conveying depth and natural authority.

secondary

Apply #3D7A4D (Moss Green) for supporting content blocks, subheadings, or secondary UI components, creating a gentle visual flow.

accent

Incorporate #60A770 (Emerald Fern Green) for subtle highlights, interactive states, or decorative elements, adding a fresh and approachable touch.

background

Utilize #C0E0C8 (Pale Mint Green) as a light, airy background color, providing a clean, refreshing canvas that enhances the darker greens.

text

Employ #1B4D2B (Deep Forest Green) for body text on lighter backgrounds for strong readability, or a dark charcoal for universal contrast.

Accessibility notes

Ensure #1B4D2B has high contrast when used for text against #C0E0C8 to meet WCAG AA standards.
Avoid using #8EC79C for small text on #C0E0C8 due to insufficient contrast.
For interactive elements, ensure distinct focus and hover states, perhaps using #60A770 against #C0E0C8.
Consider using a pure black or dark charcoal for body text if legibility with palette colors is a concern on very light backgrounds.

Recommended combinations

Pathway Depths

Excellent for creating deep, immersive backgrounds or gradients that evoke the shaded parts of a forest pathway.

#1B4D2B · #3D7A4D · #60A770

Verdant Trail

Ideal for light, airy interfaces or content blocks that convey freshness and natural growth, perfect for outdoor themes.

#C0E0C8 · #8EC79C · #60A770

Organic Route

Perfect for establishing clear visual hierarchy with natural contrasts, suitable for clean, eco-conscious web designs.

#1B4D2B · #C0E0C8 · #3D7A4D

CSS variables

:root {
  --forest-fern-pathway-1: #1B4D2B;
  --forest-fern-pathway-2: #3D7A4D;
  --forest-fern-pathway-3: #60A770;
  --forest-fern-pathway-4: #8EC79C;
  --forest-fern-pathway-5: #C0E0C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-fern-pathway": {
        1: "#1B4D2B",
        2: "#3D7A4D",
        3: "#60A770",
        4: "#8EC79C",
        5: "#C0E0C8",
      }
    }
  }
}

Hex values

Color 1#1B4D2B

Color 2#3D7A4D

Color 3#60A770

Color 4#8EC79C

Color 5#C0E0C8

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5:1AA

6.9:1AA

1.9:1Fail

1.8:1Fail

2.6:1Fail

3.6:1AA18

3.4:1AA18

1.8:1Fail

1.5:1Fail

2:1Fail

5:1AA

2.6:1Fail

1.5:1Fail

1.4:1Fail

6.9:1AA

3.6:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Forest Fern Pathway

Botanical Herbarium Shade

Botanical Leaf Veins

Botanical Study Greens