Palette

Forest Understory Glow

Captures the muted, dappled light and verdant hidden life of the forest understory, peaceful and lush.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4C5F4D#7B8E7C#A6B7A7#304431#92A693

Palette guide

How to use Forest Understory Glow

Overview

The Forest Understory Glow palette beautifully captures the muted, dappled light and verdant hidden life of the forest understory. This peaceful and lush collection features deep, grounding tones like #304431 and #4C5F4D, transitioning gracefully to the softer, luminous #A6B7A7. The mid-tones, including #7B8E7C and #92A693, provide a harmonious gradient that evokes a sense of calm and natural serenity. Designers and developers can use this palette to create tranquil, sophisticated, and earthy digital experiences. It’s ideal for branding that conveys quiet strength, natural beauty, or contemplative themes, offering a subtle glow that draws users into a peaceful visual space.

Best used for

Wellness and mindfulness brands
High-end sustainable products
Artistic photography websites
Nature-inspired interior design
Retreat or spa branding
Eco-luxury services

Suggested color roles

primary

#4C5F4D (Deep Moss) - A sophisticated, grounding green, ideal for main content areas, headers, or core brand identity.

secondary

#7B8E7C (Shady Green) - A versatile mid-tone for sub-sections, cards, or complementary graphical elements.

accent

#A6B7A7 (Dappled Glow) - A soft, luminous highlight for interactive elements, icons, or subtle decorative details, adding a touch of light.

background

#304431 (Deepest Understory) - A profound, dark background that allows lighter elements to emerge, perfect for immersive dark themes or footers.

text

#92A693 (Muted Leaf) - Use for headings or larger text on darker backgrounds; for body text on #A6B7A7, a dark charcoal or black is recommended.

Accessibility notes

#A6B7A7 is a lighter shade; ensure text on it (e.g., #304431 or black) meets contrast requirements.
Avoid using #92A693 for small text on #A6B7A7, as contrast may be insufficient.
When pairing #304431 as a background, use very light text (like white or #A6B7A7) for readability.
Check contrast for all text and interactive elements, especially between adjacent mid-tones.

Recommended combinations

Deep Serenity

Creates a rich, calming depth for primary content areas or sophisticated dark mode designs.

#304431 · #4C5F4D · #7B8E7C

Understory Light

A soft, luminous combination, ideal for clean interfaces, headers, or subtle information display.

#A6B7A7 · #92A693 · #7B8E7C

Glowing Contrast

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

#304431 · #A6B7A7 · #4C5F4D

CSS variables

:root {
  --forest-understory-glow-1: #4C5F4D;
  --forest-understory-glow-2: #7B8E7C;
  --forest-understory-glow-3: #A6B7A7;
  --forest-understory-glow-4: #304431;
  --forest-understory-glow-5: #92A693;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-understory-glow": {
        1: "#4C5F4D",
        2: "#7B8E7C",
        3: "#A6B7A7",
        4: "#304431",
        5: "#92A693",
      }
    }
  }
}

Hex values

Color 1#4C5F4D

Color 2#7B8E7C

Color 3#A6B7A7

Color 4#304431

Color 5#92A693

Accessibility

Contrast checker

2:1Fail

3.3:1AA18

1.5:1Fail

2.7:1Fail

2:1Fail

1.7:1Fail

3:1AA18

1.3:1Fail

3.3:1AA18

1.7:1Fail

5:1AA

1.2:1Fail

1.5:1Fail

3:1AA18

5:1AA

4.1:1AA18

2.7:1Fail

1.3:1Fail

1.2:1Fail

4.1:1AA18

Similar palettes

More like Forest Understory Glow

Enchanted Forest Lumina

Enchanted Glade Moss