Palette

Forest Understory Bloom

Varied greens portray the rich, vibrant plant life thriving in the dappled light of a forest's understory.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Understory Bloom 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 Understory Bloom.

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

Data visualization

#2E4B3A#4F7E5D#7BB07F#AFD8B0#E2F3E3

Palette guide

How to use Forest Understory Bloom

Overview

The Forest Understory Bloom palette is a vibrant yet natural collection of greens, depicting the lush, thriving plant life found in the dappled light of a forest's understory. This palette transitions gracefully from the deep #2E4B3A to the delicate #E2F3E3, with refreshing mid-tones like #4F7E5D, #7BB07F, and #AFD8B0 in between. It offers designers and developers a versatile range for creating inviting, organic, and refreshing digital experiences. Ideal for branding that emphasizes growth, vitality, or natural beauty, this palette provides a visual narrative that feels both grounded and subtly luminous, perfect for conveying a sense of fresh, healthy environment.

Best used for

Botanical product lines
Outdoor adventure brand websites
Health and wellness apps
Eco-tourism marketing materials
Educational content about nature
Fresh food branding

Suggested color roles

primary

#2E4B3A (Deep Understory) - A strong, foundational dark green, excellent for main backgrounds, navigation, or bold branding.

secondary

#4F7E5D (Lush Foliage) - A vibrant mid-green, suitable for content blocks, cards, or secondary brand elements, offering depth.

accent

#AFD8B0 (Dappled Light) - A bright, refreshing highlight for interactive elements, icons, or to draw attention to key information.

background

#E2F3E3 (Fresh Bloom) - A very light, almost white-green, providing a clean, expansive, and breathable canvas.

text

#7BB07F (Verdant Green) - Use for headings or larger text on lighter backgrounds; for body text on #E2F3E3, a dark charcoal or black is recommended.

Accessibility notes

#E2F3E3 is extremely light; ensure all text on it uses a very dark color (e.g., #2E4B3A or black) for contrast.
Avoid using #AFD8B0 for small text on #E2F3E3; the contrast will be insufficient.
Check contrast ratios for all text and interactive elements, especially when using lighter shades together.
For interactive elements on darker backgrounds like #2E4B3A, use #AFD8B0 or #E2F3E3 for clear visibility.

Recommended combinations

Deep Growth

Creates a rich, natural depth for immersive sections or branding that needs a strong, organic feel.

#2E4B3A · #4F7E5D · #7BB07F

Fresh Canopy

A light and invigorating combination, perfect for clean interfaces, headers, or welcoming user experiences.

#E2F3E3 · #AFD8B0 · #7BB07F

Understory Highlight

Provides a clear, refreshing contrast for calls-to-action or important content against a darker base.

#2E4B3A · #AFD8B0 · #4F7E5D

CSS variables

:root {
  --forest-understory-bloom-1: #2E4B3A;
  --forest-understory-bloom-2: #4F7E5D;
  --forest-understory-bloom-3: #7BB07F;
  --forest-understory-bloom-4: #AFD8B0;
  --forest-understory-bloom-5: #E2F3E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-understory-bloom": {
        1: "#2E4B3A",
        2: "#4F7E5D",
        3: "#7BB07F",
        4: "#AFD8B0",
        5: "#E2F3E3",
      }
    }
  }
}

Hex values

Color 1#2E4B3A

Color 2#4F7E5D

Color 3#7BB07F

Color 4#AFD8B0

Color 5#E2F3E3

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.1:1AA

8.3:1AAA

2:1Fail

1.9:1Fail

3:1Fail

4.1:1AA18

3.8:1AA18

1.9:1Fail

1.6:1Fail

2.2:1Fail