Palette

Ancient Mossy Stone

A tranquil blend evoking forgotten ruins slowly reclaimed by verdant forest moss and ancient stone.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Mossy 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 Ancient Mossy Stone.

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

Data visualization

#4F5C4A#6D8267#A3B59B#D7DCD0#3E473D

Palette guide

How to use Ancient Mossy Stone

Overview

The Ancient Mossy Stone palette offers a tranquil blend of greens and grays, evoking forgotten ruins slowly reclaimed by verdant forest moss and ancient stone. This harmonious collection features a deep stone gray #4F5C4A, a lively medium green #6D8267, and a muted sage #A3B59B. Developers and designers can leverage these organic hues for projects demanding a natural, calming, or rustic aesthetic. The palette is softened by a very light, almost white #D7DCD0 and grounded by a deep forest green #3E473D, providing excellent options for backgrounds, text, and decorative elements, ensuring a cohesive and serene visual experience that speaks of enduring nature and quiet history.

Best used for

Nature-themed websites and apps
Environmental non-profit branding
Fantasy game interfaces or concept art
Botanical garden marketing materials
Outdoor apparel and gear branding
Blogs on nature photography or historical exploration

Suggested color roles

primary

Use #4F5C4A (Deep Stone Gray) for dominant sections, headers, or a strong brand base, conveying depth and stability.

secondary

Apply #6D8267 (Medium Green) for supporting elements, sidebars, or interactive features, adding vibrancy and clarity.

accent

Employ #A3B59B (Muted Sage) for subtle highlights, icons, or decorative details, providing a gentle, organic focal point.

background

The lightest #D7DCD0 (Light Gray-Green) serves as an excellent, airy background, allowing darker text to stand out clearly.

text

For lighter backgrounds, use #3E473D (Deep Forest Green) or a deep charcoal black for optimal readability. For dark backgrounds, use white.

Accessibility notes

Ensure sufficient contrast for text when using #A3B59B (Muted Sage) on #D7DCD0 (Light Gray-Green); it may be too subtle for readability.
Pair #3E473D (Deep Forest Green) or a deep charcoal with #D7DCD0 for text to meet WCAG AA contrast standards.
Avoid using #6D8267 (Medium Green) on #A3B59B (Muted Sage) for small text; the contrast might be insufficient.
The overall natural and earthy nature of the palette means clear visual hierarchy is important for user experience.

Recommended combinations

Stone & Moss

Ideal for a natural, calming website layout with good text readability and vibrant mossy accents.

#4F5C4A · #6D8267 · #D7DCD0

Ruins Reclaimed

Great for content blocks, card backgrounds, or a subtle gradient, evoking moss-covered stones.

#A3B59B · #3E473D · #6D8267

Earthy Depths

Use the darkest shades for impactful headings or calls-to-action against a light, inviting background.

#D7DCD0 · #4F5C4A · #3E473D

CSS variables

:root {
  --ancient-mossy-stone-1: #4F5C4A;
  --ancient-mossy-stone-2: #6D8267;
  --ancient-mossy-stone-3: #A3B59B;
  --ancient-mossy-stone-4: #D7DCD0;
  --ancient-mossy-stone-5: #3E473D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-mossy-stone": {
        1: "#4F5C4A",
        2: "#6D8267",
        3: "#A3B59B",
        4: "#D7DCD0",
        5: "#3E473D",
      }
    }
  }
}

Hex values

Color 1#4F5C4A

Color 2#6D8267

Color 3#A3B59B

Color 4#D7DCD0

Color 5#3E473D

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

5.1:1AA

1.4:1Fail

1.7:1Fail

1.9:1Fail

3:1Fail

2.3:1Fail

3.3:1AA18

1.9:1Fail

1.6:1Fail

4.4:1AA18

5.1:1AA

3:1Fail

1.6:1Fail

6.9:1AA

1.4:1Fail

2.3:1Fail

4.4:1AA18

6.9:1AA

Similar palettes

More like Ancient Mossy Stone

Forest Undergrowth Blend

Rainy Forest Floor