Palette

Woodland Floor Whisper

Earthy greens and muted browns mimic the serene, shaded depths of a woodland floor.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woodland Floor Whisper 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 Woodland Floor Whisper.

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

Data visualization

#355E3B#50C878#8FBC8F#BDB76B#4B3F2A

Palette guide

How to use Woodland Floor Whisper

Overview

The Woodland Floor Whisper palette captures the serene, shaded depths of a forest floor, blending earthy greens with rich browns and a vibrant pop of freshness. It features the deep Forest Green (#355E3B) and the grounding Dark Brown (#4B3F2A), evoking damp soil and decaying leaves. These are balanced by the lively Emerald Green (#50C878) and the softer Dark Sea Green (#8FBC8F), reminiscent of lush moss and new growth. A touch of muted Olive (#BDB76B) adds a hint of sun-drenched earthiness. This collection is ideal for designers and developers seeking to convey a natural, calm, and subtly dynamic aesthetic, perfect for eco-conscious or nature-themed projects.

Best used for

Eco-tourism websites and brochures
Outdoor apparel and gear branding
Sustainable living blogs and content
Nature-themed mobile applications
Botanical garden signage and branding
Organic product packaging

Suggested color roles

primary

Forest Green (#355E3B) serves as a deep, anchoring primary, excellent for headings, main navigation, or key graphical elements, conveying growth and stability.

secondary

Dark Brown (#4B3F2A) provides a robust, earthy secondary, ideal for content blocks, footer elements, or supporting visuals, adding depth and grounding.

accent

Emerald Green (#50C878) offers a bright, fresh accent, perfect for calls to action, interactive elements, or highlights that need to stand out with vitality.

background

Dark Sea Green (#8FBC8F) provides a soft, natural background, suitable for content areas, offering a gentle green base that is easy on the eyes.

text

Dark Brown (#4B3F2A) is an excellent choice for body text on lighter backgrounds like #8FBC8F, ensuring high readability and maintaining the earthy theme.

Accessibility notes

Ensure #4B3F2A text on #8FBC8F backgrounds meets WCAG AA contrast standards.
Emerald Green (#50C878) provides good contrast against #4B3F2A for larger text or highlights.
Avoid using #BDB76B on #8FBC8F for small text due to their similar luminance values.
For interactive elements, pair #355E3B with #50C878 for clear visual feedback.

Recommended combinations

Forest Depths

Deep green and brown with a vibrant green accent for a strong, natural, and dynamic feel.

#355E3B · #4B3F2A · #50C878

Mossy Path

Soft green background with an olive accent and a deep green for grounding, creating a serene, earthy path.

#8FBC8F · #BDB76B · #355E3B

Sun Dappled

Bright green with a dark brown and a muted green for a fresh, organic, and balanced design.

#50C878 · #4B3F2A · #8FBC8F

CSS variables

:root {
  --woodland-floor-whisper-1: #355E3B;
  --woodland-floor-whisper-2: #50C878;
  --woodland-floor-whisper-3: #8FBC8F;
  --woodland-floor-whisper-4: #BDB76B;
  --woodland-floor-whisper-5: #4B3F2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woodland-floor-whisper": {
        1: "#355E3B",
        2: "#50C878",
        3: "#8FBC8F",
        4: "#BDB76B",
        5: "#4B3F2A",
      }
    }
  }
}

Hex values

Color 1#355E3B

Color 2#50C878

Color 3#8FBC8F

Color 4#BDB76B

Color 5#4B3F2A

Accessibility

Contrast checker

3.5:1AA18

3.6:1AA18

1.4:1Fail

3.5:1AA18

1:1Fail

4.8:1AA

3.5:1AA18

1:1Fail

4.8:1AA

3.6:1AA18

1:1Fail

5:1AA

1.4:1Fail

4.8:1AA

5:1AA

Similar palettes

More like Woodland Floor Whisper

Woodland Floor Whisper

See it in context.

Ready when you are.

Built with Woodland Floor Whisper.

How to use Woodland Floor Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Forest Depths

Mossy Path

Sun Dappled

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Woodland Floor Whisper