Palette

Forest Moss Carpet

Soft, muted greens and earthy tones that capture the quiet growth of moss on forest floors.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F624C#6A8068#8FB28C#B7D9B4#3B4B38

Palette guide

How to use Forest Moss Carpet

Overview

The Forest Moss Carpet palette offers a serene collection of soft, muted greens and earthy tones, capturing the quiet growth of moss on forest floors. It features a deep, subdued green #4F624C, a softer mossy green #6A8068, a lighter, airy green #8FB28C, a very light, almost pastel green #B7D9B4, and a very deep, grounding green #3B4B38. This harmonious collection of hex codes is ideal for designers seeking to evoke a sense of calm, natural tranquility, or gentle growth. Developers can integrate these colors into wellness apps, eco-friendly branding, or peaceful web interfaces, ensuring a cohesive and inviting visual experience that feels both grounded and refreshing.

Best used for

Wellness and meditation app interfaces
Eco-friendly product packaging
Nature-inspired branding and logos
Sustainable living blog themes
Botanical garden websites
Calm and minimalist web designs

Suggested color roles

primary

#3B4B38 - A very deep, grounding green, perfect for primary branding elements, robust headers, or foundational content blocks.

secondary

#4F624C - A deep, subdued green that works well for secondary content, navigation, or larger text, offering a natural depth.

accent

#6A8068 - A softer mossy green, ideal for subtle accents, interactive elements, or to draw attention without being overly bright.

background

#B7D9B4 - A very light, almost pastel green that provides a clean, airy canvas, enhancing readability for darker text.

text

#3B4B38 - Excellent for body text on the light #B7D9B4 background, ensuring strong readability. A dark charcoal or black can also be used for maximum contrast.

Accessibility notes

Ensure #3B4B38 text on #B7D9B4 background meets WCAG AA contrast for readability, striving for AAA where possible.
Avoid using #8FB28C or #6A8068 for small text on #B7D9B4 as the contrast may be insufficient.
Use #6A8068 for larger graphical elements or as a background for darker text to improve visibility.
Always verify contrast ratios for interactive elements, especially buttons and links, to guarantee accessibility.

Recommended combinations

Mossy Base

A fresh, readable combination for main content, with a light green background, very dark text, and a deep green for accents.

#B7D9B4 · #3B4B38 · #4F624C

Forest Layers

Creates a soft, layered feel for feature sections or complex data displays, blending muted greens.

#4F624C · #6A8068 · #8FB28C

Calm Contrast

A gentle yet clear combination for cards or testimonials, providing warmth and depth with natural tones.

#B7D9B4 · #6A8068 · #3B4B38

CSS variables

:root {
  --forest-moss-carpet-1: #4F624C;
  --forest-moss-carpet-2: #6A8068;
  --forest-moss-carpet-3: #8FB28C;
  --forest-moss-carpet-4: #B7D9B4;
  --forest-moss-carpet-5: #3B4B38;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-moss-carpet": {
        1: "#4F624C",
        2: "#6A8068",
        3: "#8FB28C",
        4: "#B7D9B4",
        5: "#3B4B38",
      }
    }
  }
}

Hex values

Color 1#4F624C

Color 2#6A8068

Color 3#8FB28C

Color 4#B7D9B4

Color 5#3B4B38

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

4.3:1AA18

1.4:1Fail

1.5:1Fail

1.8:1Fail

2.8:1Fail

2.2:1Fail

2.8:1Fail

1.8:1Fail

1.5:1Fail

4:1AA18

4.3:1AA18

2.8:1Fail

1.5:1Fail

6:1AA

1.4:1Fail

2.2:1Fail

4:1AA18

6:1AA

Similar palettes

More like Forest Moss Carpet

Forest Moss Carpet

See it in context.

Ready when you are.

Built with Forest Moss Carpet.

How to use Forest Moss Carpet

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Mossy Base

Forest Layers

Calm Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Forest Moss Carpet