Palette

Terra Forest Undergrowth

Rich, earthy greens and deep browns reflecting the damp, verdant 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 Terra 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 Terra Forest Undergrowth.

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

Data visualization

#2F4F4F#556B2F#6B8E23#8FBC8F#A2B29F

Palette guide

How to use Terra Forest Undergrowth

Overview

The Terra Forest Undergrowth palette captures the serene and verdant essence of a deep forest floor, blending rich, earthy greens with subtle, grounding browns. Shades like the deep forest green #2F4F4F, the vibrant mossy #6B8E23, and the soft, muted #A2B29F create an atmosphere of tranquility and natural beauty. This palette is ideal for designers and developers aiming to evoke a sense of nature, sustainability, and quiet contemplation, offering a harmonious and organic visual experience for various applications.

Best used for

Eco-conscious brand identity and packaging
Nature photography and outdoor lifestyle websites
Wellness and mindfulness app interfaces
Botanical garden or park signage and brochures
Sustainable fashion or homeware design
Educational materials about environmental science

Suggested color roles

primary

The deep #2F4F4F provides a strong, grounding primary color, excellent for brand foundations, headers, or backgrounds.

secondary

Use the vibrant #556B2F or #6B8E23 for complementary sections, subheadings, or to introduce a lively, natural element.

accent

The brighter #8FBC8F or #6B8E23 serves as an uplifting accent, drawing attention to calls to action or key interactive elements.

background

The lightest shade, #A2B29F, offers a soft, natural background, providing good contrast for darker greens. For a rich, immersive background, consider #2F4F4F.

text

For optimal readability on lighter backgrounds like #A2B29F, use the darkest shade #2F4F4F or a deep charcoal. On dark backgrounds, white or a very light gray is recommended.

Accessibility notes

Ensure sufficient contrast when using #8FBC8F and #A2B29F for text, as they are close in value.
The deep #2F4F4F offers excellent contrast for light text, making it highly readable.
Pair the vibrant #6B8E23 with #2F4F4F for strong visual separation and contrast.
Avoid placing light green text on #8FBC8F without checking WCAG contrast guidelines.

Recommended combinations

Forest Depths

Creates a deep, lush feel, perfect for hero sections or brand statements.

#2F4F4F · #556B2F · #A2B29F

Mossy Path

A lighter, airy combination suitable for body text areas and subtle highlights.

#6B8E23 · #8FBC8F · #A2B29F

Verdant Earth

Robust and natural, ideal for navigation, footers, or prominent graphic elements.

#556B2F · #2F4F4F · #6B8E23

CSS variables

:root {
  --terra-forest-undergrowth-1: #2F4F4F;
  --terra-forest-undergrowth-2: #556B2F;
  --terra-forest-undergrowth-3: #6B8E23;
  --terra-forest-undergrowth-4: #8FBC8F;
  --terra-forest-undergrowth-5: #A2B29F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-forest-undergrowth": {
        1: "#2F4F4F",
        2: "#556B2F",
        3: "#6B8E23",
        4: "#8FBC8F",
        5: "#A2B29F",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#556B2F

Color 3#6B8E23

Color 4#8FBC8F

Color 5#A2B29F

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

4.1:1AA18

4:1AA18

1.5:1Fail

1.6:1Fail

2.8:1Fail

2.7:1Fail

2.3:1Fail

1.6:1Fail

1.8:1Fail

1.7:1Fail

4.1:1AA18

2.8:1Fail

1.8:1Fail

1:1Fail

4:1AA18

2.7:1Fail

1.7:1Fail

1:1Fail

Similar palettes

More like Terra Forest Undergrowth

Enchanted Moss Garden