Back to palettes

Palette

Emerald Moss Stone

Inspired by ancient, moss-covered stones found deep within a lush, verdant forest.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#2E8B57#5F9EA0#4B6F44#8B8682

Palette guide

How to use Emerald Moss Stone

Overview

The Emerald Moss Stone palette draws inspiration from ancient, moss-covered stones nestled deep within a lush forest, blending cool grays with vibrant greens. Featuring a grounding charcoal #36454F and a rich emerald #2E8B57, it introduces a refreshing blue-gray #5F9EA0, an earthy olive #4B6F44, and a warm stone gray #8B8682. This unique collection is perfect for designs seeking to convey natural strength, timeless elegance, and organic resilience. Ideal for outdoor living brands, architectural concepts, or any project that benefits from a sophisticated, earthy, and balanced aesthetic. The interplay of cool and warm tones creates a dynamic yet harmonious visual narrative.

Best used for

  • Outdoor and garden landscaping
  • Sustainable building materials branding
  • Nature photography and art
  • Eco-friendly product packaging
  • Rustic and earthy interior design
  • Historical or heritage site preservation

Suggested color roles

primary

Use #36454F as the deepest, most stable color for main headers, branding, or dark mode.

secondary

Employ #2E8B57 as a vibrant green for subheadings, important text, or active states.

accent

Apply #5F9EA0 as a cool blue-gray accent for highlights, secondary information, or subtle calls-to-action.

background

Utilize #8B8682 as a warm, neutral stone gray for content areas, providing a calm and earthy base.

text

Pair #36454F with light backgrounds for strong contrast, or use white/light gray on darker backgrounds.

Accessibility notes

  • #8B8682 may require darker text (e.g., #36454F or black) to ensure readability against lighter backgrounds.
  • Pair #36454F or #2E8B57 with white or off-white text for optimal legibility on dark backgrounds.
  • Be cautious using #5F9EA0 for small text on #8B8682 due to potential low contrast; check WCAG AA.
  • Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Stone Foundation

Creates a strong, grounded aesthetic for primary branding and robust interfaces.

#36454F · #4B6F44 · #8B8682

Mossy Growth

Ideal for vibrant accents and clear content against a natural, neutral background.

#2E8B57 · #5F9EA0 · #36454F

Earthy Balance

Suitable for content sections, providing a calm backdrop with clear, engaging elements.

#8B8682 · #2E8B57 · #4B6F44

CSS variables

:root {
  --emerald-moss-stone-1: #36454F;
  --emerald-moss-stone-2: #2E8B57;
  --emerald-moss-stone-3: #5F9EA0;
  --emerald-moss-stone-4: #4B6F44;
  --emerald-moss-stone-5: #8B8682;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-moss-stone": {
        1: "#36454F",
        2: "#2E8B57",
        3: "#5F9EA0",
        4: "#4B6F44",
        5: "#8B8682",
      }
    }
  }
}

Related searches

emerald green stone palettemossy gray green colorsearthy forest brandingnatural resilience schemerustic green UI design

Palette colors

Hex values

Color 1#36454F
·
Color 2#2E8B57
·
Color 3#5F9EA0
·
Color 4#4B6F44
·
Color 5#8B8682
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
3.2:1AA18
1.7:1Fail
2.7:1Fail
2
2.3:1Fail
1.4:1Fail
1.4:1Fail
1.2:1Fail
3
3.2:1AA18
1.4:1Fail
1.9:1Fail
1.2:1Fail
4
1.7:1Fail
1.4:1Fail
1.9:1Fail
1.6:1Fail
5
2.7:1Fail
1.2:1Fail
1.2:1Fail
1.6:1Fail

Similar palettes

More like Emerald Moss Stone

View all cool
Deep Marine Verdure
Deep Mossy Glen
Emerald Grove Sanctuary
Emerald Riverbed Moss
Enchanted Forest Bloom
Forest Canopy Glimmer