Back to palettes

Palette

Forest Floor Moss

Soft, muted greens capture the damp, quiet beauty of lush moss covering a forest floor.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B3E2D#445A45#627860#81967B#A5B29B

Palette guide

How to use Forest Floor Moss

Overview

The Forest Floor Moss palette (version 3) is a collection of soft, muted greens that capture the damp, quiet beauty of lush moss covering a forest floor. Starting with the deep #2B3E2D and progressing through #445A45, #627860, and #81967B, it offers a gentle gradient of verdant hues. The lightest shade, #A5B29B, provides an airy touch, reminiscent of morning mist. This palette is ideal for designers and developers seeking to create tranquil, eco-conscious, or understated digital experiences, branding, or art. Its harmonious blend of soft greens evokes a sense of peace, natural growth, and subtle sophistication, perfect for conveying a calm mood.

Best used for

  • Eco-conscious branding and packaging
  • Natural skincare product lines
  • Botanical art and design projects
  • Meditation and wellness app interfaces
  • Sustainable fashion collections
  • Garden and landscaping website design

Suggested color roles

primary

Utilize #2B3E2D as a deep, anchoring green for main headings, navigation, or strong background elements.

secondary

Apply #445A45 for supportive text, subheadings, or larger UI components, offering a rich, balanced mid-tone green.

accent

Introduce #81967B as a soft, subtle accent for decorative patterns, gentle highlights, or hover states.

background

Employ #A5B29B as a light, airy background color that provides a calming base and good contrast for darker text.

text

Select #2B3E2D or a deep charcoal for primary text, ensuring excellent readability on lighter palette shades.

Accessibility notes

  • Ensure #2B3E2D provides strong contrast for text when used on #A5B29B to meet WCAG AA standards.
  • Use #445A45 for larger text or headings on light backgrounds, testing carefully for sufficient contrast.
  • Avoid using #81967B for small text due to its muted nature and potential for lower contrast.
  • Test all text and background color pairings for optimal readability, especially with mid-tone greens.

Recommended combinations

Deep & Soft

Excellent for primary branding, clear text on light backgrounds, and balanced content blocks.

#2B3E2D · #A5B29B · #445A45

Mossy Gradient

Ideal for illustrations, subtle UI transitions, or layered graphics that require a gentle color progression.

#445A45 · #627860 · #81967B

Gentle Accents

Use for callouts, decorative borders, or to provide subtle emphasis without strong visual breaks.

#2B3E2D · #81967B · #627860

CSS variables

:root {
  --forest-floor-moss-3-1: #2B3E2D;
  --forest-floor-moss-3-2: #445A45;
  --forest-floor-moss-3-3: #627860;
  --forest-floor-moss-3-4: #81967B;
  --forest-floor-moss-3-5: #A5B29B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-moss-3": {
        1: "#2B3E2D",
        2: "#445A45",
        3: "#627860",
        4: "#81967B",
        5: "#A5B29B",
      }
    }
  }
}

Related searches

muted moss green palettequiet forest colorsnatural undergrowth schemesoft green brandingcalm earthy tones

Palette colors

Hex values

Color 1#2B3E2D
·
Color 2#445A45
·
Color 3#627860
·
Color 4#81967B
·
Color 5#A5B29B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.6:1AA18
5.2:1AA
2
1.5:1Fail
1.6:1Fail
2.4:1Fail
3.4:1AA18
3
2.4:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
3.6:1AA18
2.4:1Fail
1.5:1Fail
1.4:1Fail
5
5.2:1AA
3.4:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Forest Floor Moss

View all earth