Palette

Forest Floor Emerald

A deep, calming palette reflecting the various shades found in a peaceful, shaded woodland.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#223D33#3B5F48#60886C#9ECF9D#D0ECC0

Palette guide

How to use Forest Floor Emerald

Overview

The Forest Floor Emerald palette offers a deep, calming collection of greens, perfect for evoking a peaceful woodland atmosphere. With shades like the dark, grounding #223D33 and the rich, supportive #3B5F48, it provides a solid foundation for natural and organic designs. Brighter tones such as the refreshing #9ECF9D and the airy #D0ECC0 introduce light and vitality, reflecting sun-dappled leaves. This palette is ideal for designers and developers aiming to create serene, eco-conscious interfaces, branding, or digital art that feels deeply connected to nature without being overtly bright. Its balance of depth and freshness makes it highly versatile.

Best used for

Eco-friendly product branding
Spa and wellness website design
Nature-themed educational materials
Interior design for tranquil spaces
Outdoor apparel and gear marketing
Sustainable living blogs and content

Suggested color roles

primary

Use #223D33 as your primary anchor, providing a deep, sophisticated base for headers or key branding elements.

secondary

Apply #3B5F48 for supportive sections, background elements with depth, or large blocks of color that require richness.

accent

Incorporate #9ECF9D as a refreshing accent for calls-to-action, interactive elements, or illustrative highlights.

background

Utilize #D0ECC0 for light, airy backgrounds that allow other colors to stand out, ensuring readability and a sense of calm.

text

Pair a deep shade like #223D33 or a dark charcoal for body text to ensure excellent readability on lighter backgrounds like #D0ECC0.

Accessibility notes

Ensure #223D33 provides sufficient contrast for text when placed on lighter shades like #D0ECC0.
Use #3B5F48 for larger text or headings on light backgrounds to maintain legibility.
Avoid using #9ECF9D for small text due to its lower contrast against very light backgrounds.
Test all text and background pairings to meet WCAG AA contrast guidelines, especially with mid-tones.

Recommended combinations

Deep & Fresh

Excellent for primary branding, headers on light backgrounds, and subtle design accents.

#223D33 · #D0ECC0 · #60886C

Muted Harmony

Ideal for illustrations, data visualizations, or UI elements that require a gentle, cohesive flow.

#3B5F48 · #60886C · #9ECF9D

Vibrant Accent

Perfect for drawing attention to calls-to-action or highlighting important information within content.

#223D33 · #9ECF9D · #3B5F48

CSS variables

:root {
  --forest-floor-emerald-1: #223D33;
  --forest-floor-emerald-2: #3B5F48;
  --forest-floor-emerald-3: #60886C;
  --forest-floor-emerald-4: #9ECF9D;
  --forest-floor-emerald-5: #D0ECC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-emerald": {
        1: "#223D33",
        2: "#3B5F48",
        3: "#60886C",
        4: "#9ECF9D",
        5: "#D0ECC0",
      }
    }
  }
}

Hex values

Color 1#223D33

Color 2#3B5F48

Color 3#60886C

Color 4#9ECF9D

Color 5#D0ECC0

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

6.7:1AA

9.2:1AAA

1.6:1Fail

1.8:1Fail

4.1:1AA18

5.6:1AA

2.9:1Fail

1.8:1Fail

2.3:1Fail

3.1:1AA18

6.7:1AA

4.1:1AA18

2.3:1Fail

1.4:1Fail

9.2:1AAA

5.6:1AA

3.1:1AA18

1.4:1Fail

Similar palettes

More like Forest Floor Emerald

View all earth

Ancient Forest Hush

Forest Floor Ephemera

Ancient Forest Realm

Enchanted Forest Floor

Forest Floor Echoes

Forest Fungi