Back to palettes

Palette

Deep Forest Undergrowth

Rich and varied greens mirroring the hidden, verdant life beneath a dense forest canopy.

earthnatural5 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

#006400#228B22#556B2F#8FBC8F#2E8B57

Palette guide

How to use Deep Forest Undergrowth

Overview

The Deep Forest Undergrowth palette evokes the rich, verdant layers found beneath a dense forest canopy. Featuring a spectrum of greens, from the deep, grounding #006400 and vibrant #228B22, to the earthy #556B2F and refreshing #2E8B57, this collection is ideal for projects seeking a natural, organic feel. The lighter #8FBC8F adds a touch of brightness, simulating dappled sunlight. Designers and developers can leverage this palette to create serene, eco-conscious, or adventurous interfaces. It’s perfect for brands emphasizing sustainability, outdoor themes, or a sense of tranquility, offering a versatile range of natural tones.

Best used for

  • Eco-friendly product branding and packaging
  • Nature-themed websites and mobile apps
  • Outdoor adventure gear and apparel design
  • Wellness and mindfulness application interfaces
  • Botanical garden or conservation organization branding
  • Interior design concepts for natural spaces

Suggested color roles

primary

#006400 (Dark Green). A strong, grounding hue perfect for main headers, navigation bars, or dominant brand elements, conveying stability and depth.

secondary

#228B22 (Forest Green). Use for subheadings, active states, or prominent call-to-action buttons to maintain a vibrant, natural feel without overpowering the primary.

accent

#2E8B57 (Sea Green). An invigorating accent for interactive elements, small icons, or highlights that need to pop with a fresh, lively touch.

background

#8FBC8F (Dark Sea Green). A soft, breathable background color that offers a gentle contrast, ideal for content areas or secondary sections to maintain an airy, natural aesthetic.

text

#556B2F (Dark Olive Green) for secondary text or captions, providing good contrast against lighter backgrounds. For main body text on light backgrounds, consider a dark charcoal like #333333 for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when pairing lighter greens like #8FBC8F with text.
  • #006400 provides excellent contrast for white or very light text, making it suitable for primary buttons or dark mode elements.
  • Avoid using #8FBC8F for small text on #228B22 as the contrast might be insufficient for WCAG AA standards.
  • Test all color combinations with a contrast checker to meet WCAG 2.1 guidelines, particularly for interactive elements and crucial information.

Recommended combinations

Forest Depths

A sophisticated trio for main layouts, using the darkest as primary, olive as secondary, and light green for subtle accents or backgrounds.

#006400 · #556B2F · #8FBC8F

Verdant Energy

A dynamic combination for calls to action or feature sections, leveraging the vibrancy of forest and sea greens against a deep anchor.

#228B22 · #2E8B57 · #006400

Undergrowth Light

Suitable for softer, content-heavy areas or secondary information, offering a gentle, readable flow with natural tones.

#8FBC8F · #556B2F · #228B22

CSS variables

:root {
  --deep-forest-undergrowth-2-1: #006400;
  --deep-forest-undergrowth-2-2: #228B22;
  --deep-forest-undergrowth-2-3: #556B2F;
  --deep-forest-undergrowth-2-4: #8FBC8F;
  --deep-forest-undergrowth-2-5: #2E8B57;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-forest-undergrowth-2": {
        1: "#006400",
        2: "#228B22",
        3: "#556B2F",
        4: "#8FBC8F",
        5: "#2E8B57",
      }
    }
  }
}

Related searches

natural green color paletteforest theme colorsearthy green hex codesdeep nature color schemesustainable design palette

Palette colors

Hex values

Color 1#006400
·
Color 2#228B22
·
Color 3#556B2F
·
Color 4#8FBC8F
·
Color 5#2E8B57
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.3:1Fail
3.5:1AA18
1.8:1Fail
2
1.7:1Fail
1.4:1Fail
2:1Fail
1:1Fail
3
1.3:1Fail
1.4:1Fail
2.8:1Fail
1.4:1Fail
4
3.5:1AA18
2:1Fail
2.8:1Fail
2:1Fail
5
1.8:1Fail
1:1Fail
1.4:1Fail
2:1Fail

Similar palettes

More like Deep Forest Undergrowth

View all earth
Ancient Forest Realm
Enchanted Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Canopy
Forest Canopy
Forest Floor Echoes