Back to palettes

Palette

Forest Floor Moss

A serene palette capturing the verdant beauty and damp stillness of a shaded forest floor after rain.

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

#4A5B4C#6B7D60#909D7D#C2C6A9#2E3B2E

Palette guide

How to use Forest Floor Moss

Overview

The Forest Floor Moss palette (version 2) is a serene collection capturing the verdant beauty and damp stillness of a shaded woodland after rain. Anchored by the deep, grounding #2E3B2E and the rich #4A5B4C, it provides a sense of stability and calm. Lighter, muted greens like #6B7D60, #909D7D, and the airy #C2C6A9 introduce softness and freshness, reflecting sun-dappled, wet moss. This palette is ideal for designers and developers seeking to create tranquil, eco-friendly, or wellness-oriented digital experiences, branding, or art. Its harmonious blend of greens evokes a peaceful, natural environment, perfect for conveying serenity and growth.

Best used for

  • Wellness and mindfulness brand identities
  • Eco-friendly product packaging
  • Botanical art and photography websites
  • Spa and retreat marketing materials
  • Sustainable living blogs and content
  • Nature-inspired home goods branding

Suggested color roles

primary

Use #2E3B2E as your primary anchor for strong headings, navigation, or deep background sections, providing depth.

secondary

Apply #4A5B4C for supportive sections, subheadings, or larger UI components, offering a rich, balanced green-grey.

accent

Introduce #909D7D as a subtle, soft accent for decorative elements, gentle highlights, or hover states.

background

Utilize #C2C6A9 for light, muted backgrounds, providing a calming and highly legible canvas for content.

text

Select #2E3B2E or a very dark grey for primary text, ensuring excellent readability on lighter palette shades.

Accessibility notes

  • Ensure #2E3B2E provides strong contrast for text when used on #C2C6A9 to meet WCAG AA standards.
  • Use #4A5B4C for larger text or headings on light backgrounds, testing carefully for sufficient contrast.
  • Avoid using #909D7D for small text sizes, as its muted nature can reduce legibility.
  • Test all text and background color pairings for optimal readability, especially with mid-tone greens.

Recommended combinations

Deep & Calm

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

#2E3B2E · #C2C6A9 · #4A5B4C

Mossy Tones

Ideal for illustrations, natural UI elements, or layered graphics that require a subtle green gradient.

#4A5B4C · #6B7D60 · #909D7D

Gentle Contrast

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

#2E3B2E · #909D7D · #6B7D60

CSS variables

:root {
  --forest-floor-moss-2-1: #4A5B4C;
  --forest-floor-moss-2-2: #6B7D60;
  --forest-floor-moss-2-3: #909D7D;
  --forest-floor-moss-2-4: #C2C6A9;
  --forest-floor-moss-2-5: #2E3B2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-moss-2": {
        1: "#4A5B4C",
        2: "#6B7D60",
        3: "#909D7D",
        4: "#C2C6A9",
        5: "#2E3B2E",
      }
    }
  }
}

Related searches

serene moss green palettedamp forest colorstranquil nature designmuted green earth tonescalm woodland color scheme

Palette colors

Hex values

Color 1#4A5B4C
·
Color 2#6B7D60
·
Color 3#909D7D
·
Color 4#C2C6A9
·
Color 5#2E3B2E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
4.1:1AA18
1.6:1Fail
2
1.6:1Fail
1.5:1Fail
2.5:1Fail
2.7:1Fail
3
2.5:1Fail
1.5:1Fail
1.6:1Fail
4.1:1AA18
4
4.1:1AA18
2.5:1Fail
1.6:1Fail
6.7:1AA
5
1.6:1Fail
2.7:1Fail
4.1:1AA18
6.7:1AA

Similar palettes

More like Forest Floor Moss

View all earth