Back to palettes

Palette

Forest Floor Echo

Subdued and earthy tones mirroring the quiet, shaded undergrowth of an ancient forest.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E6C54#738E75#A5BCA6#2F4D3C#8C9F8C

Palette guide

How to use Forest Floor Echo

Overview

The Forest Floor Echo palette presents subdued and earthy tones, mirroring the quiet, shaded undergrowth of an ancient forest. Anchored by the profound #2F4D3C and the serene #4E6C54, this palette establishes a deep, natural foundation. The mid-tones, #738E75 and #8C9F8C, offer a gentle progression of muted greens, while #A5BCA6 provides a soft, light highlight. Designers and developers can utilize this harmonious collection to craft projects that evoke a sense of calm, natural depth, and subtle sophistication. It's particularly effective for creating interfaces and branding that prioritize tranquility and an organic, unpretentious aesthetic.

Best used for

  • Zen garden design inspiration
  • Eco-conscious lifestyle blogs
  • Meditation and wellness app interfaces
  • Sustainable clothing brand websites
  • Nature photography showcases
  • Quiet reading app themes

Suggested color roles

primary

#2F4D3C - A very dark, grounding forest green, ideal for main backgrounds, robust headers, or primary brand identity.

secondary

#4E6C54 - A muted dark green, suitable for sub-sections, navigation, or to add depth to larger content blocks.

accent

#738E75 - Use this muted mid-green for subtle calls to action, interactive elements, or graphic details to add a gentle pop.

background

#A5BCA6 - A light, muted green, providing a soft, airy, and highly readable canvas for darker text.

text

#2F4D3C - Ensures excellent contrast and readability on lighter backgrounds like #A5BCA6, suitable for body copy and headings.

Accessibility notes

  • Ensure #2F4D3C text on #A5BCA6 background meets WCAG AA contrast for comfortable reading.
  • Avoid using #8C9F8C for small text on #738E75 as the contrast might be insufficient.
  • For text on dark backgrounds such as #2F4D3C or #4E6C54, use a very light color, like white or #A5BCA6, for visibility.
  • Use sufficient line height and letter spacing to improve text readability, especially with muted color schemes.

Recommended combinations

Deep Shade

Creates a profound, layered depth, excellent for strong brand presence or immersive hero sections.

#2F4D3C · #4E6C54 · #738E75

Quiet Undergrowth

A light and serene combination for main content areas, offering a calm and readable experience.

#A5BCA6 · #8C9F8C · #4E6C54

Subtle Whisper

Use a dark base with a gentle mid-tone accent, perfect for highlighting key information or navigation elements.

#2F4D3C · #738E75 · #A5BCA6

CSS variables

:root {
  --forest-floor-echo-1: #4E6C54;
  --forest-floor-echo-2: #738E75;
  --forest-floor-echo-3: #A5BCA6;
  --forest-floor-echo-4: #2F4D3C;
  --forest-floor-echo-5: #8C9F8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-echo": {
        1: "#4E6C54",
        2: "#738E75",
        3: "#A5BCA6",
        4: "#2F4D3C",
        5: "#8C9F8C",
      }
    }
  }
}

Related searches

subdued green color palettequiet forest aestheticnatural earth tone UIcalm woodland designmuted green branding

Palette colors

Hex values

Color 1#4E6C54
·
Color 2#738E75
·
Color 3#A5BCA6
·
Color 4#2F4D3C
·
Color 5#8C9F8C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
1.6:1Fail
2.1:1Fail
2
1.6:1Fail
1.8:1Fail
2.6:1Fail
1.3:1Fail
3
2.9:1Fail
1.8:1Fail
4.6:1AA
1.4:1Fail
4
1.6:1Fail
2.6:1Fail
4.6:1AA
3.3:1AA18
5
2.1:1Fail
1.3:1Fail
1.4:1Fail
3.3:1AA18

Similar palettes

More like Forest Floor Echo

View all earth