Palette

Forest Floor Debris

Subtly textured greens and browns reflecting the rich, decomposing matter on a forest floor.

darknatural5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F5E4E#7A8D7A#A6BBA6#323D32#202720

Palette guide

How to use Forest Floor Debris

Overview

The Forest Floor Debris palette offers a subtly textured range of dark greens and browns, reflecting the rich, decomposing matter found on a forest floor. Dominated by deep, organic hues like #323D32 and #202720, it provides a profound and sophisticated base. The muted mid-tones, #4F5E4E and #7A8D7A, introduce subtle variation and depth, while #A6BBA6 serves as a gentle highlight. This palette is exceptionally well-suited for designers and developers aiming to create projects with a serious, understated, and naturally grounded aesthetic. Its dark and cohesive nature ensures a strong visual impact with a touch of organic mystery.

Best used for

High-end natural product branding
Dark mode UI for productivity apps
Environmental science data visualization
Luxury eco-lodge websites
Understated fashion or accessory lines
Documentary film titles or credits

Suggested color roles

primary

#323D32 - A very dark, grounding green, ideal for main backgrounds, navigation, or primary brand elements, conveying solidity.

secondary

#4F5E4E - A muted dark green-brown, suitable for sub-sections, borders, or to add subtle depth to layouts.

accent

#7A8D7A - Use this muted mid-green for subtle highlights, interactive elements, or to break up darker areas with a soft touch.

background

#202720 - An extremely dark, almost black-green, perfect for a sophisticated, deep background in dark mode interfaces.

text

#A6BBA6 - Provides excellent readability and a soft contrast on very dark backgrounds like #202720 or #323D32.

Accessibility notes

Ensure #A6BBA6 text on #202720 or #323D32 background meets WCAG AA contrast for readability.
Avoid using #7A8D7A for small text on #4F5E4E due to insufficient contrast.
For interactive elements, ensure hover/focus states have sufficient color change and/or a clear outline.
Consider using larger font sizes for body text, especially when working with dark themes, to enhance readability.

Recommended combinations

Deep Undergrowth

Creates an extremely deep, rich, and sophisticated dark theme, ideal for immersive experiences.

#202720 · #323D32 · #4F5E4E

Subtle Layer

A dark base with soft, muted green accents, excellent for content blocks in a dark mode UI.

#323D32 · #7A8D7A · #A6BBA6

Organic Highlight

Use a dark muted green with a light accent for highlighting key information or navigation elements.

#4F5E4E · #A6BBA6 · #202720

CSS variables

:root {
  --forest-floor-debris-1: #4F5E4E;
  --forest-floor-debris-2: #7A8D7A;
  --forest-floor-debris-3: #A6BBA6;
  --forest-floor-debris-4: #323D32;
  --forest-floor-debris-5: #202720;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-debris": {
        1: "#4F5E4E",
        2: "#7A8D7A",
        3: "#A6BBA6",
        4: "#323D32",
        5: "#202720",
      }
    }
  }
}

Hex values

Color 1#4F5E4E

Color 2#7A8D7A

Color 3#A6BBA6

Color 4#323D32

Color 5#202720

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

1.6:1Fail

2.2:1Fail

1.9:1Fail

1.7:1Fail

3.2:1AA18

4.3:1AA18

3.4:1AA18

1.7:1Fail

5.6:1AA

7.5:1AAA

1.6:1Fail

3.2:1AA18

5.6:1AA

1.3:1Fail

2.2:1Fail

4.3:1AA18

7.5:1AAA

1.3:1Fail

Similar palettes

More like Forest Floor Debris

Deep Forest Seclusion

Deep Wood Ferns