Palette

Forest Floor Canopy

A calming blend of deep forest greens, soft moss, and earthy browns, evoking a stroll through an ancient woodland.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E473D#556B2F#A0A57C#B6A785#6C5541

Palette guide

How to use Forest Floor Canopy

Overview

The Forest Floor Canopy palette offers a calming blend of deep forest greens, soft moss, and earthy browns, perfect for evoking the serene atmosphere of an ancient woodland. With grounding hues like #2E473D and #6C5541, complemented by the organic #556B2F and the muted #A0A57C, this palette creates a rich, natural tapestry. The lighter #B6A785 provides a warm, neutral counterpoint, ideal for backgrounds or accents. Designers and developers can leverage these colors to craft interfaces and branding that feel grounded, authentic, and subtly sophisticated, making it suitable for projects that aim for a natural, undisturbed aesthetic.

Best used for

Heritage brand packaging
Outdoor adventure product lines
Sustainable architecture firm websites
Ecotourism promotional materials
Handcrafted goods marketplaces
Nature documentary branding

Suggested color roles

primary

#2E473D - A deep, anchoring forest green, perfect for main sections, headers, or robust brand identity elements.

secondary

#6C5541 - A rich, earthy brown suitable for complementary sections, footers, or strong visual separation.

accent

#556B2F - Use this olive green for calls to action, interactive elements, or graphic details to add an organic pop.

background

#B6A785 - A warm, muted beige ideal for main content areas, providing a soft, natural canvas for darker text.

text

#2E473D - Ensures excellent readability on lighter backgrounds like #B6A785, suitable for body copy and headings.

Accessibility notes

Ensure #2E473D text on #B6A785 background meets WCAG AA contrast for comfortable reading.
Avoid using #A0A57C for small text on #556B2F due to insufficient contrast.
For text on dark backgrounds such as #2E473D or #6C5541, use a light color like white or a very pale cream.
Provide alternative text for any color-coded information to ensure accessibility for color-blind users.

Recommended combinations

Deep Canopy

Creates a robust, layered forest depth, excellent for strong brand presence or dark mode themes.

#2E473D · #6C5541 · #556B2F

Earthy Path

A soft, natural combination for main content areas, providing warmth and good readability.

#B6A785 · #A0A57C · #6C5541

Mossy Highlight

Use a dark base with a muted sage accent, perfect for subtle highlights or secondary information.

#2E473D · #A0A57C · #B6A785

CSS variables

:root {
  --forest-floor-canopy-2-1: #2E473D;
  --forest-floor-canopy-2-2: #556B2F;
  --forest-floor-canopy-2-3: #A0A57C;
  --forest-floor-canopy-2-4: #B6A785;
  --forest-floor-canopy-2-5: #6C5541;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-canopy-2": {
        1: "#2E473D",
        2: "#556B2F",
        3: "#A0A57C",
        4: "#B6A785",
        5: "#6C5541",
      }
    }
  }
}

Hex values

Color 1#2E473D

Color 2#556B2F

Color 3#A0A57C

Color 4#B6A785

Color 5#6C5541

Accessibility

Contrast checker

1.7:1Fail

3.9:1AA18

4.2:1AA18

1.4:1Fail

1.7:1Fail

2.3:1Fail

2.5:1Fail

1.2:1Fail

3.9:1AA18

2.3:1Fail

1.1:1Fail

2.7:1Fail

4.2:1AA18

2.5:1Fail

1.1:1Fail

2.9:1Fail

1.4:1Fail

1.2:1Fail

2.7:1Fail

2.9:1Fail

Similar palettes

More like Forest Floor Canopy

Enchanted Forest Lumina

Forest Floor Gems

Forest Fungi Moss