Palette

Forest Canopy Path

A lush mix of greens, capturing the varied foliage found along a winding path in a deep forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Canopy 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 Forest Canopy Path.

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

Data visualization

#228B22#556B2F#006400#8FBC8F#4B5320

Palette guide

How to use Forest Canopy Path

Overview

The Forest Canopy Path palette embodies the rich, varied greens found along a winding trail deep within a lush forest. It features a harmonious blend of deep, natural greens such as #006400 and #228B22, complemented by the earthy, mossy tones of #556B2F and #4B5320. A softer, lighter green, #8FBC8F, adds a touch of freshness, mimicking dappled light. This palette is perfect for designers aiming to convey authenticity, ruggedness, and a deep connection to nature. Its grounding yet vibrant hues are ideal for projects that require a sense of growth, tradition, and the enduring beauty of the natural world.

Best used for

Traditional nature-focused brand identities
Outdoor gear and apparel product design
Sustainable agriculture and farming websites
Historical nature documentaries or educational content
Botanical garden branding and signage
Rustic and earthy interior design concepts

Suggested color roles

primary

Utilize #006400 or #228B22 for core branding, prominent headings, or main call-to-action buttons, establishing a strong, natural presence.

secondary

Employ #556B2F or #4B5320 for supporting content, subheadings, or secondary navigation, adding depth and an organic feel.

accent

Reserve #8FBC8F for subtle highlights, interactive states, or graphic elements that need a gentle, refreshing touch.

background

A very light neutral (e.g., #F5F5DC) or a soft application of #8FBC8F can serve as a clean, natural background.

text

For body text, use a deep green like #006400 or a rich charcoal to ensure excellent readability and maintain the earthy aesthetic.

Accessibility notes

Ensure sufficient contrast when placing text on lighter shades like #8FBC8F; dark green or black text is recommended.
Verify that combinations of #556B2F and #4B5320 have adequate contrast for readability, especially for smaller text.
Use #006400 for critical information to maximize visibility against varying backgrounds.
Test color pairings for users with color vision deficiencies, as some greens might blend more easily.

Recommended combinations

Deep Foliage

Ideal for creating a sense of depth and lushness in headers, hero images, or primary content blocks.

#006400 · #228B22 · #556B2F

Mossy Trail

Perfect for backgrounds or supporting sections, offering a subtle, earthy gradient that feels grounded and natural.

#4B5320 · #556B2F · #8FBC8F

Woodland Contrast

A strong base with a light accent and vibrant secondary, suitable for data visualization or feature highlights.

#006400 · #8FBC8F · #228B22

CSS variables

:root {
  --forest-canopy-path-1: #228B22;
  --forest-canopy-path-2: #556B2F;
  --forest-canopy-path-3: #006400;
  --forest-canopy-path-4: #8FBC8F;
  --forest-canopy-path-5: #4B5320;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-canopy-path": {
        1: "#228B22",
        2: "#556B2F",
        3: "#006400",
        4: "#8FBC8F",
        5: "#4B5320",
      }
    }
  }
}

Hex values

Color 1#228B22

Color 2#556B2F

Color 3#006400

Color 4#8FBC8F

Color 5#4B5320

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

2:1Fail

1.9:1Fail

1.4:1Fail

1.3:1Fail

2.8:1Fail

1.4:1Fail

1.7:1Fail

1.3:1Fail

3.5:1AA18

1.1:1Fail

2:1Fail

2.8:1Fail

3.5:1AA18

3.8:1AA18

1.9:1Fail

1.4:1Fail

1.1:1Fail

3.8:1AA18

Similar palettes

More like Forest Canopy Path

Forest Canopy Path

See it in context.

Ready when you are.

Built with Forest Canopy Path.

How to use Forest Canopy Path

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Foliage

Mossy Trail

Woodland Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Forest Canopy Path