Palette

Forest Floor Moss

Captures the varied greens of a thriving forest floor, from deep moss to vibrant new growth.

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#556B2F#6B8E23#ADFF2F#7CFC00

Palette guide

How to use Forest Floor Moss

Overview

The Forest Floor Moss palette (original) captures the varied greens of a thriving forest floor, from deep moss to vibrant new growth. Featuring strong, anchoring shades like #228B22 and the earthy #556B2F, it provides a solid natural foundation. Bright, energetic greens such as #6B8E23, #ADFF2F, and the lively #7CFC00 introduce vitality and freshness, reflecting abundant life. This palette is ideal for designers and developers seeking to create dynamic, eco-friendly, or outdoor-focused digital experiences, branding, or art. Its blend of deep and vivid greens evokes a sense of lushness and growth, perfect for projects that celebrate nature's energy.

Best used for

Environmental organizations and campaigns
Outdoor adventure brand identities
Health and wellness product marketing
Gardening and horticulture websites
Children's educational content about nature
Spring and summer campaign branding

Suggested color roles

primary

Utilize #228B22 as a deep, anchoring forest green for main headings, navigation, or strong background elements.

secondary

Apply #556B2F for supportive text, subheadings, or larger UI components, offering an earthy olive green.

accent

Introduce #ADFF2F as a bright, energetic lime green accent for calls-to-action, alerts, or to add a focal point.

background

Employ #7CFC00 as a vibrant, fresh background for energetic sections, or pair it with a very light neutral (not in palette) for contrast.

text

Select #228B22 or a very dark green/charcoal for primary text, ensuring excellent readability on brighter palette shades.

Accessibility notes

Ensure #228B22 provides strong contrast for text when used on #ADFF2F or #7CFC00 to meet WCAG AA standards.
Use lighter greens like #ADFF2F and #7CFC00 with caution for text; prioritize contrast and larger font sizes.
Consider using white or very light text on #228B22 and #556B2F for optimal readability.
Test all text and background color combinations for optimal readability, especially with the bright greens.

Recommended combinations

Deep & Bright

Excellent for primary branding, high-impact calls-to-action, and visually striking, energetic focal points.

#228B22 · #ADFF2F · #7CFC00

Earthy Greens

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

#556B2F · #6B8E23 · #228B22

Fresh Growth

Perfect for decorative elements, infographics, or sections needing a burst of vibrant, natural energy.

#7CFC00 · #ADFF2F · #6B8E23

CSS variables

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

Tailwind config

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

Hex values

Color 1#228B22

Color 2#556B2F

Color 3#6B8E23

Color 4#ADFF2F

Color 5#7CFC00

Accessibility

Contrast checker

1.4:1Fail

1.2:1Fail

3.6:1AA18

3.3:1AA18

1.4:1Fail

1.6:1Fail

4.8:1AA

4.5:1AA18

1.2:1Fail

1.6:1Fail

3.1:1AA18

2.9:1Fail