Palette

Quiet Forest Floor

Muted greens and browns, reflecting the damp, serene textures and quiet beauty of a shaded forest floor.

earthnatural5 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

#D9DDC7#B4B7A0#8A8F7B#666D5B#444B3F

Palette guide

How to use Quiet Forest Floor

Overview

The Quiet Forest Floor palette captures the muted greens and browns found in a serene, shaded woodland. From the soft, almost grey-green of #D9DDC7 to the deep, grounding #444B3F, this collection offers a tranquil and organic feel. Designers can utilize these hex codes to evoke a sense of calm and natural beauty, perfect for projects requiring a subtle, earthy aesthetic. The mid-tones like #8A8F7B and #666D5B provide rich depth and versatility, allowing developers to craft interfaces that feel both sophisticated and connected to nature. This palette is ideal for creating a peaceful, contemplative user experience.

Best used for

Rustic home decor and furniture websites
Artisan craft and handmade product branding
Natural cosmetic or wellness brand identity
Environmental and conservation organization platforms
Cozy blog designs and personal websites
Photography portfolios showcasing nature scenes

Suggested color roles

primary

Use #8A8F7B as a balanced, earthy mid-tone for main content areas or prominent features.

secondary

Employ #B4B7A0 for supporting elements, sub-headers, or subtle backgrounds, offering a soft, complementary green-grey.

accent

Apply #444B3F sparingly for strong contrasts, icons, or calls-to-action, adding significant depth and grounding.

background

The very light #D9DDC7 serves as a soft, serene background, ensuring excellent readability for darker text.

text

Utilize #444B3F for primary text, providing exceptional legibility against lighter backgrounds like #D9DDC7.

Accessibility notes

Ensure #444B3F text has strong contrast against #D9DDC7, meeting WCAG AA requirements for small text.
Avoid using #B4B7A0 or #8A8F7B for small text on #D9DDC7 backgrounds; contrast may be insufficient.
When using #666D5B on #D9DDC7, verify contrast for readability, especially for body text.
For interactive elements, always check contrast ratios when combining colors from this palette.

Recommended combinations

Moss & Bark

Creates a natural, layered feel for hero sections, with #D9DDC7 as a base and #444B3F for strong headings.

#D9DDC7 · #8A8F7B · #444B3F

Shaded Path

Excellent for defining content blocks or cards, using #B4B7A0 for the background and #444B3F for key information.

#B4B7A0 · #666D5B · #444B3F

Forest Light

Provides gentle transitions for UI elements like buttons or navigation, offering a soft, harmonious appearance.

#D9DDC7 · #B4B7A0 · #8A8F7B

CSS variables

:root {
  --quiet-forest-floor-1: #D9DDC7;
  --quiet-forest-floor-2: #B4B7A0;
  --quiet-forest-floor-3: #8A8F7B;
  --quiet-forest-floor-4: #666D5B;
  --quiet-forest-floor-5: #444B3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-forest-floor": {
        1: "#D9DDC7",
        2: "#B4B7A0",
        3: "#8A8F7B",
        4: "#666D5B",
        5: "#444B3F",
      }
    }
  }
}

Hex values

Color 1#D9DDC7

Color 2#B4B7A0

Color 3#8A8F7B

Color 4#666D5B

Color 5#444B3F

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

3.9:1AA18

6.5:1AA

1.5:1Fail

1.6:1Fail

2.6:1Fail

4.4:1AA18

2.4:1Fail

1.6:1Fail

2.7:1Fail

3.9:1AA18

2.6:1Fail

1.6:1Fail

1.7:1Fail

6.5:1AA

4.4:1AA18

2.7:1Fail

1.7: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

Moss & Bark

Shaded Path

Forest Light

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Quiet Forest Floor