Palette

Mushroom Forest Floor

The subtle and varied tones of a forest floor, where mushrooms thrive among decaying leaves.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#556B2F#D2B48C#8FBC8F#BC8F8F

Palette guide

How to use Mushroom Forest Floor

Overview

The Mushroom Forest Floor palette (version 3) presents a rich, natural array of tones found beneath a forest canopy, combining deep browns and verdant greens with soft, earthy accents. Key colors include the robust #8B4513 (Saddle Brown), the deep #556B2F (Olive Green), the warm #D2B48C (Tan), the fresh #8FBC8F (Dark Sea Green), and the gentle #BC8F8F (Rosy Brown). This palette is invaluable for designers and developers seeking to evoke a sense of natural beauty, rustic charm, or seasonal warmth. It's particularly well-suited for projects related to nature, organic products, or cozy, inviting digital experiences.

Best used for

Autumnal and seasonal marketing campaigns
Organic food and beverage branding
Garden and outdoor living design
Rustic wedding invitations and decor
Craft breweries and artisanal products
Nature-inspired digital illustrations

Suggested color roles

primary

Use #8B4513 as a strong, warm primary color for headers, important calls to action, or grounding elements in a design.

secondary

Employ #556B2F to add a deep, natural green contrast, ideal for secondary sections, navigation, or subtle brand accents.

accent

Apply #BC8F8F as a soft, unexpected accent for delicate details, highlights, or to introduce a subtle warmth and unique touch.

background

A light, inviting background like #D2B48C provides a warm and natural canvas, allowing the deeper greens and browns to stand out harmoniously.

text

For excellent readability, use #8B4513 or a dark charcoal (e.g., #333333) for primary text on lighter backgrounds like #D2B48C or #8FBC8F.

Accessibility notes

Ensure sufficient contrast for text, especially when using #8FBC8F on #D2B48C or similar mid-tone pairings.
The lighter colors #D2B48C and #8FBC8F will require dark text for optimal readability.
Avoid using #BC8F8F for small text as its muted nature might lead to poor legibility.
Always test text and interactive element colors against their backgrounds using WCAG contrast checkers.

Recommended combinations

Earthy Depth

A balanced combination offering strong contrast and natural appeal, suitable for primary content and branding.

#8B4513 · #556B2F · #D2B48C

Forest Blush

Creates a softer, more nuanced natural look, great for backgrounds, illustrations, or gentle accents.

#556B2F · #8FBC8F · #BC8F8F

Rustic Ground

Combines rich brown with warm, lighter tones, ideal for cozy themes, vintage aesthetics, or inviting interfaces.

#8B4513 · #D2B48C · #BC8F8F

CSS variables

:root {
  --mushroom-forest-floor-3-1: #8B4513;
  --mushroom-forest-floor-3-2: #556B2F;
  --mushroom-forest-floor-3-3: #D2B48C;
  --mushroom-forest-floor-3-4: #8FBC8F;
  --mushroom-forest-floor-3-5: #BC8F8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mushroom-forest-floor-3": {
        1: "#8B4513",
        2: "#556B2F",
        3: "#D2B48C",
        4: "#8FBC8F",
        5: "#BC8F8F",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#556B2F

Color 3#D2B48C

Color 4#8FBC8F

Color 5#BC8F8F

Accessibility

Contrast checker

1.2:1Fail

3.6:1AA18

3.3:1AA18

2.5:1Fail

1.2:1Fail

3:1AA18

2.8:1Fail

2.1:1Fail

3.6:1AA18

3:1AA18

1.1:1Fail

1.4:1Fail