Palette

Quiet Forest Floor

A tranquil blend of forest greens, mimicking the moss and leaves on a peaceful woodland floor.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Forest Floor 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 Quiet Forest Floor.

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

Data visualization

#3E4A35#5A6E4F#7B8F70#9EB392#C2D7B4

Palette guide

How to use Quiet Forest Floor

Overview

The Quiet Forest Floor palette offers a tranquil spectrum of greens, echoing the serene undergrowth of a peaceful woodland. This collection, ranging from the deep forest hue of #3E4A35 to the fresh, airy #C2D7B4, provides a natural and calming aesthetic. Designers can leverage these hex codes to create environments that feel organic and refreshing, while developers will find them easy to integrate for a harmonious user interface. Mid-tones like #5A6E4F and #7B8F70 provide versatile options for layering and depth, making this palette ideal for projects centered around nature, wellness, or sustainability.

Best used for

Eco-conscious brand identity and marketing
Nature-themed mobile applications and websites
Wellness and meditation platforms
Outdoor equipment and apparel branding
Sustainable product packaging design
Botanical garden or park information displays

Suggested color roles

primary

Use #5A6E4F as a balanced, inviting green for main content areas or brand elements.

secondary

Employ #7B8F70 for supporting sections, sub-headers, or UI elements, providing a lighter, complementary shade.

accent

Apply #3E4A35 sparingly for strong contrasts, icons, or calls-to-action, adding depth and grounding.

background

The light #C2D7B4 serves as an airy, fresh background, ensuring good readability for darker text.

text

Utilize #3E4A35 for primary text, offering excellent legibility against lighter backgrounds like #C2D7B4.

Accessibility notes

Ensure #3E4A35 text has sufficient contrast against #C2D7B4 for all content, especially small text.
Avoid using #9EB392 or #7B8F70 for small text on #C2D7B4 backgrounds due to potential low contrast.
When using #5A6E4F on #C2D7B4, verify it meets WCAG contrast guidelines for readability.
Consider a pure white text for very dark backgrounds like #3E4A35 for maximum accessibility.

Recommended combinations

Mossy Path

Creates a natural gradient for headers or layered backgrounds, moving from light to deep green.

#C2D7B4 · #7B8F70 · #3E4A35

Deep Woods

Excellent for defining sections or cards, with #3E4A35 for borders and #5A6E4F for content areas.

#3E4A35 · #5A6E4F · #9EB392

Canopy Light

Provides a gentle, harmonious look for UI elements like buttons or navigation, suggesting natural transitions.

#9EB392 · #7B8F70 · #C2D7B4

CSS variables

:root {
  --quiet-forest-floor-2-1: #3E4A35;
  --quiet-forest-floor-2-2: #5A6E4F;
  --quiet-forest-floor-2-3: #7B8F70;
  --quiet-forest-floor-2-4: #9EB392;
  --quiet-forest-floor-2-5: #C2D7B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-forest-floor-2": {
        1: "#3E4A35",
        2: "#5A6E4F",
        3: "#7B8F70",
        4: "#9EB392",
        5: "#C2D7B4",
      }
    }
  }
}

Hex values

Color 1#3E4A35

Color 2#5A6E4F

Color 3#7B8F70

Color 4#9EB392

Color 5#C2D7B4

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4.2:1AA18

6.1:1AA

1.7:1Fail

1.6:1Fail

2.5:1Fail

3.6:1AA18

2.7:1Fail

1.6:1Fail

2.3:1Fail

4.2:1AA18

2.5:1Fail

1.6:1Fail

1.5:1Fail

6.1:1AA

3.6:1AA18

2.3:1Fail

1.5:1Fail

Similar palettes

More like Quiet Forest Floor

Quiet Forest Floor

See it in context.

Ready when you are.

Built with Quiet Forest Floor.

How to use Quiet Forest Floor

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Mossy Path

Deep Woods

Canopy Light

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Quiet Forest Floor