Back to palettes

Palette

Woodland Mushroom Ring

A subtle palette capturing the muted tones of forest floor mushrooms and their surroundings.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woodland Mushroom Ring 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 Woodland Mushroom Ring.

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

Data visualization

#8B4513#B0C4DE#A9A9A9#6B8E23#A0522D

Palette guide

How to use Woodland Mushroom Ring

Overview

The Woodland Mushroom Ring palette captures the subtle, earthy tones of a forest floor, featuring a range of browns, greens, and a unique blue-grey. With shades like the rich #8B4513, the cool #B0C4DE, and the vibrant #6B8E23, this palette offers a grounded yet enchanting feel. Designers and developers can leverage its muted complexity to create designs that evoke natural mystery and rustic charm. The inclusion of #A9A9A9 and #A0522D provides versatile neutrals and warm accents, perfect for projects seeking a quiet, natural aesthetic with intriguing contrasts.

Best used for

  • Indie game art and character design
  • Cozy blog or editorial layouts
  • Nature-inspired craft and handmade goods branding
  • Autumnal or rustic event themes
  • Storytelling and fantasy illustrations
  • Home decor e-commerce sites

Suggested color roles

primary

#8B4513 serves as a deep, earthy brown, ideal for foundational elements and rich textures.

secondary

#A0522D provides a warm, terracotta-like accent, suitable for headers or important callouts.

accent

#6B8E23 introduces a vibrant moss green, perfect for highlighting interactive elements or natural details.

background

#B0C4DE offers a soft, cool grey-blue, providing a subtle and calming backdrop.

text

#8B4513 is a strong, dark brown suitable for body text, ensuring good readability, or use charcoal.

Accessibility notes

  • Ensure #8B4513 provides sufficient contrast against #B0C4DE for body text.
  • Exercise caution using #A9A9A9 for text; verify WCAG AA compliance on all backgrounds.
  • White text on #8B4513, #A0522D, or #6B8E23 will generally provide good contrast.
  • Avoid using #B0C4DE for small text on very light backgrounds due to low contrast.

Recommended combinations

Forest Floor

Captures the organic textures of soil, mushrooms, and moss.

#8B4513 · #A0522D · #6B8E23

Misty Glade

Creates a soft, ethereal atmosphere, suitable for headers or background elements.

#B0C4DE · #A9A9A9 · #6B8E23

Earthy Contrast

Provides a balanced contrast for UI elements, combining warmth with coolness.

#8B4513 · #B0C4DE · #A9A9A9

CSS variables

:root {
  --woodland-mushroom-ring-1: #8B4513;
  --woodland-mushroom-ring-2: #B0C4DE;
  --woodland-mushroom-ring-3: #A9A9A9;
  --woodland-mushroom-ring-4: #6B8E23;
  --woodland-mushroom-ring-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woodland-mushroom-ring": {
        1: "#8B4513",
        2: "#B0C4DE",
        3: "#A9A9A9",
        4: "#6B8E23",
        5: "#A0522D",
      }
    }
  }
}

Related searches

mushroom color schemesearthy forest palettesubtle nature colorsrustic autumn palettenatural muted tones

Palette colors

Hex values

Color 1#8B4513
·
Color 2#B0C4DE
·
Color 3#A9A9A9
·
Color 4#6B8E23
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
4:1AA18
3:1AA18
1.9:1Fail
1.3:1Fail
2
4:1AA18
1.3:1Fail
2.1:1Fail
3.2:1AA18
3
3:1AA18
1.3:1Fail
1.6:1Fail
2.4:1Fail
4
1.9:1Fail
2.1:1Fail
1.6:1Fail
1.5:1Fail
5
1.3:1Fail
3.2:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Woodland Mushroom Ring

View all earth
Enchanted Moss Garden
Forest Floor Moss
Forest Moss Trail
Forest Mushroom Rings
Lush Mossy Glen
Mushroom Forest Glow