Palette

Forest Undergrowth Blend

Organic greens and muted earth tones, capturing the rich, textured layers of a healthy forest undergrowth.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4E3A#5C775C#7F9F7F#A3C7A3#C6E0C6

Palette guide

How to use Forest Undergrowth Blend

Overview

The Forest Undergrowth Blend palette offers a rich, organic collection of greens, perfectly capturing the textured layers of a healthy forest floor. This gradient moves from the deep, grounding #3A4E3A to the light, airy #C6E0C6, with harmonious mid-tones like #5C775C, #7F9F7F, and #A3C7A3 providing a seamless transition. Designers and developers can leverage this palette to create natural, serene, and inviting digital experiences. It's an excellent choice for branding that emphasizes sustainability, growth, or tranquility, providing a visual language that feels inherently calm, balanced, and deeply connected to nature without being overtly bright.

Best used for

Environmental non-profit websites
Organic food packaging
Botanical garden branding
Sustainable clothing lines
Mindful living apps
Nature-inspired educational platforms

Suggested color roles

primary

#3A4E3A (Deep Undergrowth) - A solid, dark green, ideal for main backgrounds, headers, or a strong brand foundation.

secondary

#5C775C (Mossy Green) - A versatile mid-tone for content sections, cards, or secondary navigation.

accent

#A3C7A3 (Light Foliage) - Offers a refreshing highlight for interactive elements, icons, or subtle decorative touches.

background

#C6E0C6 (Pale Sprout) - A very light, almost pastel green, perfect for clean, breathable content areas or overall background.

text

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

Accessibility notes

#C6E0C6 is very light; use dark text (e.g., #3A4E3A or black) on it for adequate contrast.
Avoid using #A3C7A3 for small text on #C6E0C6, as contrast will be insufficient.
Ensure sufficient contrast for all text and interactive elements, especially when using lighter shades together.
For interactive elements on darker backgrounds, use #A3C7A3 or #C6E0C6 to ensure visibility.

Recommended combinations

Deep Forest Floor

Creates a rich, layered depth for immersive dark-themed sections or hero images.

#3A4E3A · #5C775C · #7F9F7F

Fresh Growth

A light and airy combination, perfect for clean layouts, headers, or welcoming user interfaces.

#C6E0C6 · #A3C7A3 · #7F9F7F

Undergrowth Highlight

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

#3A4E3A · #A3C7A3 · #5C775C

CSS variables

:root {
  --forest-undergrowth-blend-1: #3A4E3A;
  --forest-undergrowth-blend-2: #5C775C;
  --forest-undergrowth-blend-3: #7F9F7F;
  --forest-undergrowth-blend-4: #A3C7A3;
  --forest-undergrowth-blend-5: #C6E0C6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-undergrowth-blend": {
        1: "#3A4E3A",
        2: "#5C775C",
        3: "#7F9F7F",
        4: "#A3C7A3",
        5: "#C6E0C6",
      }
    }
  }
}

Hex values

Color 1#3A4E3A

Color 2#5C775C

Color 3#7F9F7F

Color 4#A3C7A3

Color 5#C6E0C6

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

4.8:1AA

6.4:1AA

1.8:1Fail

1.7:1Fail

2.6:1Fail

3.5:1AA18

3.1:1AA18

1.7:1Fail

1.6:1Fail

2.1:1Fail

4.8:1AA

2.6:1Fail

1.6:1Fail

1.3:1Fail

6.4:1AA

3.5:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Forest Undergrowth Blend