Palette

Verdant Moss Stone

A tranquil blend of forest greens and muted grays, evoking moss-covered stones.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Moss Stone 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 Verdant Moss Stone.

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

Data visualization

#3A4739#5C6F59#8AA186#ADBFA7#6E846B

Palette guide

How to use Verdant Moss Stone

Overview

The Verdant Moss Stone palette offers a tranquil and grounded aesthetic, perfect for designs seeking a natural, earthy feel. Inspired by moss-covered stones in a quiet forest, this collection features deep forest greens like #3A4739 and #5C6F59, balanced by softer, muted tones such as #8AA186 and #6E846B. The lightest shade, #ADBFA7, provides an excellent base or highlight, ensuring versatility for both digital and print applications. Designers can leverage these harmonious colors to evoke a sense of calm, stability, and organic elegance, making it ideal for brands focused on sustainability, wellness, or traditional craftsmanship.

Best used for

Eco-friendly brand identities
Nature-themed website designs
Spa and wellness marketing materials
Packaging for organic products
Interior design mood boards
Sustainable fashion branding

Suggested color roles

primary

Use #3A4739 as a strong, grounding primary color for headers, main navigation, or dominant branding elements, conveying stability.

secondary

Apply #5C6F59 or #6E846B for subheadings, secondary buttons, or large content blocks to provide a softer, yet still substantial, presence.

accent

#8AA186 works well as a gentle accent for interactive elements, icons, or subtle highlights without overpowering the overall tranquil mood.

background

#ADBFA7 serves as an excellent, subtle background, offering a clean canvas that allows darker text and elements to stand out crisply.

text

For optimal readability, use #3A4739 for body text on light backgrounds like #ADBFA7, or a near-white shade on darker elements like #3A4739.

Accessibility notes

Ensure sufficient contrast between #3A4739 text and #ADBFA7 background for WCAG AA compliance.
Avoid using #8AA186 on #ADBFA7 for small text, as contrast might be insufficient.
Darker greens like #5C6F59 or #6E846B provide good contrast against #ADBFA7 for body copy.
When pairing lighter shades like #8AA186 or #ADBFA7, use a very dark text color, such as charcoal or black, for optimal legibility.

Recommended combinations

Forest Path

Ideal for primary content blocks, with dark text on a light background and a mid-tone for highlights.

#3A4739 · #6E846B · #ADBFA7

Mossy Stone

Creates a balanced, natural feel for headers, sub-sections, or visual branding elements.

#5C6F59 · #8AA186 · #3A4739

Quiet Grove

Suitable for softer interfaces, backgrounds with readable text, and subtle interactive components.

#ADBFA7 · #8AA186 · #5C6F59

CSS variables

:root {
  --verdant-moss-stone-1: #3A4739;
  --verdant-moss-stone-2: #5C6F59;
  --verdant-moss-stone-3: #8AA186;
  --verdant-moss-stone-4: #ADBFA7;
  --verdant-moss-stone-5: #6E846B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-moss-stone": {
        1: "#3A4739",
        2: "#5C6F59",
        3: "#8AA186",
        4: "#ADBFA7",
        5: "#6E846B",
      }
    }
  }
}

Hex values

Color 1#3A4739

Color 2#5C6F59

Color 3#8AA186

Color 4#ADBFA7

Color 5#6E846B

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5:1AA

2.4:1Fail

1.8:1Fail

1.9:1Fail

2.8:1Fail

1.3:1Fail

3.5:1AA18

1.9:1Fail

1.4:1Fail

1.5:1Fail

5:1AA

2.8:1Fail

1.4:1Fail

2.1:1Fail

2.4:1Fail

1.3:1Fail

1.5:1Fail

2.1:1Fail

Similar palettes

More like Verdant Moss Stone

View all earth

Mossy Stone Wall

Mossy Stone Whisper

Terra Forest Undergrowth

Ancient Mossy Stone

Ancient Temple Moss

Emerald Canopy Hush