Palette

Ancient Forest Hearth

A tranquil blend of greens inspired by deep, old growth forests and their hidden clearings.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Forest Hearth 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 Ancient Forest Hearth.

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

Data visualization

#3F503A#627A5F#89A387#AFCBB0#D6E3D8

Palette guide

How to use Ancient Forest Hearth

Overview

The Ancient Forest Hearth palette offers a tranquil blend of greens inspired by deep, old-growth forests and their hidden clearings. This serene collection ranges from the grounding #3F503A to the refreshing #627A5F, and the gentle #89A387. Lighter, airy tones like #AFCBB0 and #D6E3D8 evoke soft light filtering through leaves. It's an excellent choice for designs that aim to convey peace, natural growth, and a sense of calm. Designers will find this palette perfect for creating harmonious and inviting user interfaces, while developers can easily implement these balanced hex codes for a consistent and soothing visual experience across various platforms and applications.

Best used for

Wellness and meditation apps
Eco-friendly product branding
Gardening or botanical websites
Interior design for tranquil spaces
Sustainable living blogs
Children's nature-themed book illustrations

Suggested color roles

primary

#3F503A - A deep, grounding forest green, ideal for foundational elements, headers, or setting a calm, stable mood.

secondary

#627A5F - A balanced mid-tone green, perfect for supporting content blocks, navigation, or as a background for lighter text.

accent

#AFCBB0 - A light, airy green that can highlight key information, interactive elements, or provide a gentle contrast.

background

#D6E3D8 - A very light, almost off-white green, providing a clean, fresh, and expansive backdrop. Ideal for main content areas.

text

#89A387 - This soft, muted green can be used for secondary text or subtle accents on lighter backgrounds. For main body text, a dark charcoal or deep forest green like #3F503A ensures optimal readability against very light backgrounds.

Accessibility notes

Ensure sufficient contrast when using #89A387 text on #AFCBB0 or #D6E3D8 backgrounds.
Text in #3F503A works well on #D6E3D8 for high contrast (WCAG AA/AAA).
Avoid placing #627A5F text on similar mid-tone backgrounds without careful checking.
For interactive elements, ensure distinct visual cues beyond color, especially with these subtle green variations.

Recommended combinations

Forest Depths

Creates a strong, yet calm foundation for hero sections or main navigation.

#3F503A · #627A5F · #D6E3D8

Misty Clearing

Ideal for clean, readable content areas with a fresh, natural feel.

#D6E3D8 · #AFCBB0 · #3F503A

Leafy Accent

Perfect for subtle graphical details, borders, or secondary information.

#89A387 · #627A5F · #AFCBB0

CSS variables

:root {
  --ancient-forest-hearth-1: #3F503A;
  --ancient-forest-hearth-2: #627A5F;
  --ancient-forest-hearth-3: #89A387;
  --ancient-forest-hearth-4: #AFCBB0;
  --ancient-forest-hearth-5: #D6E3D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-forest-hearth": {
        1: "#3F503A",
        2: "#627A5F",
        3: "#89A387",
        4: "#AFCBB0",
        5: "#D6E3D8",
      }
    }
  }
}

Hex values

Color 1#3F503A

Color 2#627A5F

Color 3#89A387

Color 4#AFCBB0

Color 5#D6E3D8

Accessibility

Contrast checker

1.8:1Fail

3.2:1AA18

5:1AA

6.5:1AA

1.8:1Fail

1.7:1Fail

2.7:1Fail

3.5:1AA18

3.2:1AA18

1.7:1Fail

1.6:1Fail

2.1:1Fail

5:1AA

2.7:1Fail

1.6:1Fail

1.3:1Fail

6.5:1AA

3.5:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Ancient Forest Hearth

Deep Forest Undergrowth

Emerald Moss Glade

Forest Floor Moss