Back to palettes

Palette

Deep Forest Undergrowth

Shades of muted green and deep khaki capture the subtle colors and hidden life of a forest's undergrowth.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Forest Undergrowth 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 Deep Forest Undergrowth.

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

Data visualization

#2B3C2A#4A5D4B#6C7D6D#8DA08E#B1C1B1

Palette guide

How to use Deep Forest Undergrowth

Overview

The Deep Forest Undergrowth palette beautifully captures the serene, hidden depths of a woodland floor with its array of muted, earthy greens. This collection, featuring the deep foundational #2B3C2A, the versatile supporting #4A5D4B, and the soft, airy #B1C1B1, is ideal for designs aiming for tranquility, natural elegance, and an organic feel. Designers and developers can leverage these sophisticated shades to create experiences that are grounded and calming, perfect for conveying sustainability, a connection to nature, or a sense of quiet introspection. Each hex code contributes to a harmonious, understated aesthetic, allowing for subtle visual storytelling without overwhelming the user.

Best used for

  • Eco-friendly brand identity
  • Wellness and meditation app interfaces
  • Nature-themed product packaging
  • Interior design mood boards (especially biophilic)
  • Sustainable fashion branding
  • Understated website UI/UX

Suggested color roles

primary

Primary: #2B3C2A (Deep Forest Green). A robust, grounding shade excellent for primary branding elements, headers, and strong foundational backgrounds, conveying stability.

secondary

Secondary: #4A5D4B (Mossy Mid-Green). A versatile supporting color for subheadings, navigation menus, or larger content blocks, providing depth without being too heavy.

accent

Accent: #8DA08E (Soft Sage Accent). A gentle, approachable accent to highlight key information, buttons, or decorative elements without disrupting the calm, organic mood.

background

Background: #B1C1B1 (Pale Undergrowth). A light, airy base for main content areas, offering a subtle warmth and excellent readability when paired with darker text.

text

Text: #2B3C2A (Deep Forest Green) or a rich charcoal like #333333. Provides strong contrast against lighter backgrounds such as #B1C1B1 for optimal readability in body text and headlines.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter greens like #8DA08E with #B1C1B1 for text, as they may not meet WCAG AA standards without larger font sizes.
  • Always use #2B3C2A or a dark neutral for body text on #B1C1B1 to guarantee excellent readability and meet WCAG AA contrast guidelines.
  • Avoid using adjacent shades like #4A5D4B and #6C7D6D for critical UI elements without sufficient size or weight differences to distinguish them.
  • Test all text and interactive element color combinations using a contrast checker to ensure compliance with WCAG 2.1 AA or AAA guidelines for all users.

Recommended combinations

Deep Earth Base

Ideal for a strong, grounded brand presence with a dark primary, a supportive secondary, and a light background for clear content hierarchy.

#2B3C2A · #4A5D4B · #B1C1B1

Forest Echo Layers

Perfect for subtle gradients, layered elements, or data visualization where a gentle transition between similar, muted greens is desired.

#4A5D4B · #6C7D6D · #8DA08E

Undergrowth Highlight

A classic light background with dark text setup, incorporating a mid-tone green for buttons, interactive elements, or secondary calls to action.

#B1C1B1 · #2B3C2A · #6C7D6D

CSS variables

:root {
  --deep-forest-undergrowth-1: #2B3C2A;
  --deep-forest-undergrowth-2: #4A5D4B;
  --deep-forest-undergrowth-3: #6C7D6D;
  --deep-forest-undergrowth-4: #8DA08E;
  --deep-forest-undergrowth-5: #B1C1B1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-forest-undergrowth": {
        1: "#2B3C2A",
        2: "#4A5D4B",
        3: "#6C7D6D",
        4: "#8DA08E",
        5: "#B1C1B1",
      }
    }
  }
}

Related searches

muted green color schemesearth tone branding colorsnature inspired web designforest green hex codescalm organic color palette

Palette colors

Hex values

Color 1#2B3C2A
·
Color 2#4A5D4B
·
Color 3#6C7D6D
·
Color 4#8DA08E
·
Color 5#B1C1B1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
4.2:1AA18
6.2:1AA
2
1.7:1Fail
1.6:1Fail
2.6:1Fail
3.8:1AA18
3
2.7:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.2:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.2:1AA
3.8:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Deep Forest Undergrowth

View all earth
Rainy Forest Path
Ancient Forest Hearth
Ancient Moss Rune
Ancient Moss Whisper
Emerald Moss Glade
Forest Floor Moss