Back to palettes

Palette

Forest Floor Moss

A vibrant yet grounded palette inspired by the lush, damp greens and muted tones of a forest floor.

earthnatural5 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

#228B22#3CB371#6B8E23#A9A9A9#556B2F

Palette guide

How to use Forest Floor Moss

Overview

The Forest Floor Moss palette (version 5) presents a vibrant yet grounded collection inspired by the lush, damp greens and muted tones of a forest floor. It features bold greens like #228B22 and #3CB371, balanced by the earthy #6B8E23 and #556B2F. A neutral #A9A9A9 provides a grounding grey, allowing the greens to truly pop. This palette is ideal for designers and developers seeking to create energetic, eco-friendly, or nature-focused digital experiences, branding, or art. Its blend of vivid and subdued greens evokes a sense of natural vitality and stability, perfect for projects that demand both freshness and grounded authenticity.

Best used for

  • Gardening and landscaping services branding
  • Eco-friendly product packaging with a fresh feel
  • Outdoor adventure and camping gear marketing
  • Nature conservation websites and campaigns
  • Fresh food and organic produce branding
  • Botanical illustration and design

Suggested color roles

primary

Utilize #228B22 as a vibrant, strong primary color for headers, key branding, or impactful calls-to-action.

secondary

Apply #3CB371 for supportive text, subheadings, or larger UI components, offering a bright, balanced emerald.

accent

Introduce #6B8E23 as an earthy, warm green accent for decorative elements, subtle highlights, or interactive states.

background

Employ #A9A9A9 as a neutral, grounding grey background that allows the greens to stand out clearly.

text

Select #228B22 or a deep charcoal for primary text, ensuring excellent readability on lighter backgrounds like #A9A9A9.

Accessibility notes

  • Ensure #228B22 provides strong contrast for text when used on #A9A9A9 to meet WCAG AA standards.
  • Use #3CB371 for larger text or headings on #A9A9A9, testing carefully for sufficient contrast.
  • Avoid using #A9A9A9 for critical text, as its mid-tone value can reduce legibility against certain colors.
  • Test all text and background color pairings for optimal readability, especially with the brighter greens.

Recommended combinations

Vibrant & Grounded

Excellent for primary branding, main headings, and vibrant accents against a neutral backdrop.

#228B22 · #A9A9A9 · #3CB371

Lush Greens

Ideal for illustrations, UI elements, or natural textures that require a cohesive green gradient.

#3CB371 · #6B8E23 · #556B2F

Fresh Contrast

Perfect for calls-to-action, highlights, or decorative elements that need to pop against a neutral base.

#228B22 · #6B8E23 · #A9A9A9

CSS variables

:root {
  --forest-floor-moss-5-1: #228B22;
  --forest-floor-moss-5-2: #3CB371;
  --forest-floor-moss-5-3: #6B8E23;
  --forest-floor-moss-5-4: #A9A9A9;
  --forest-floor-moss-5-5: #556B2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-moss-5": {
        1: "#228B22",
        2: "#3CB371",
        3: "#6B8E23",
        4: "#A9A9A9",
        5: "#556B2F",
      }
    }
  }
}

Related searches

vibrant moss green paletteearthy green grey schemelush forest colorsnatural outdoor brandinggarden inspired palette

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#6B8E23
·
Color 4#A9A9A9
·
Color 5#556B2F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
1.9:1Fail
1.4:1Fail
2
1.6:1Fail
1.4:1Fail
1.1:1Fail
2.2:1Fail
3
1.2:1Fail
1.4:1Fail
1.6:1Fail
1.6:1Fail
4
1.9:1Fail
1.1:1Fail
1.6:1Fail
2.5:1Fail
5
1.4:1Fail
2.2:1Fail
1.6:1Fail
2.5:1Fail

Similar palettes

More like Forest Floor Moss

View all earth
Forest Moss Trail
Ancient Mossy Stone
Emerald Canopy Hush
Enchanted Moss Garden
Forest Fern Canopy
Forest Floor Moss