Palette

Emerald Moss Glade

A tranquil mix of deep greens, evoking the damp, shaded, and vibrant beauty of a secluded mossy glade.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A5243#4A7C6B#7CC2B0#1E3B30#5E8A7D

Palette guide

How to use Emerald Moss Glade

Overview

The Emerald Moss Glade palette offers a tranquil mix of deep greens, evoking the damp, shaded, and vibrant beauty of a secluded mossy glade. Featuring the profound depth of #1E3B30 and #2A5243, it transitions through the balanced #4A7C6B and #5E8A7D, culminating in the refreshing #7CC2B0. This collection is perfect for designs seeking to convey serenity, natural beauty, and a sense of peaceful retreat. Ideal for wellness brands, environmental initiatives, or any digital interface that benefits from a clean, harmonious, and soothing aesthetic. The monochromatic progression provides excellent visual flow and depth, creating an immersive user experience.

Best used for

Meditation and mindfulness apps
Eco-friendly home decor brands
Nature retreat and wellness centers
Botanical illustration and art
Sustainable product design
Calm and inviting web interfaces

Suggested color roles

primary

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

secondary

Employ #2A5243 as a supportive deep green for subheadings, important text, or active states.

accent

Apply #5E8A7D as a refreshing, subtle accent for interactive elements or gentle highlights.

background

Utilize #7CC2B0 as a light, airy background for clean content areas, providing a calm and clear base.

text

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

Accessibility notes

#7CC2B0 may require darker text (e.g., #1E3B30 or black) to ensure readability against lighter backgrounds.
Pair #1E3B30 or #2A5243 with white or off-white text for optimal legibility on dark backgrounds.
Avoid using #4A7C6B directly on #5E8A7D for small text due to potential low contrast.
Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Glade Depths

Creates a strong, immersive foundation for primary branding or elegant dark mode interfaces.

#1E3B30 · #2A5243 · #4A7C6B

Mossy Light

Ideal for clean, inviting layouts with light backgrounds and clear, readable text.

#7CC2B0 · #5E8A7D · #1E3B30

Tranquil Path

Suitable for interactive elements, progress indicators, or subtle informational displays.

#4A7C6B · #5E8A7D · #2A5243

CSS variables

:root {
  --emerald-moss-glade-1: #2A5243;
  --emerald-moss-glade-2: #4A7C6B;
  --emerald-moss-glade-3: #7CC2B0;
  --emerald-moss-glade-4: #1E3B30;
  --emerald-moss-glade-5: #5E8A7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-moss-glade": {
        1: "#2A5243",
        2: "#4A7C6B",
        3: "#7CC2B0",
        4: "#1E3B30",
        5: "#5E8A7D",
      }
    }
  }
}

Hex values

Color 1#2A5243

Color 2#4A7C6B

Color 3#7CC2B0

Color 4#1E3B30

Color 5#5E8A7D

Accessibility

Contrast checker

1.8:1Fail

4.3:1AA18

1.4:1Fail

2.3:1Fail

1.8:1Fail

2.3:1Fail

2.5:1Fail

1.2:1Fail

4.3:1AA18

2.3:1Fail

5.9:1AA

1.9:1Fail

1.4:1Fail

2.5:1Fail

5.9:1AA

3.1:1AA18

2.3:1Fail

1.2:1Fail

1.9:1Fail

3.1:1AA18

Similar palettes

More like Emerald Moss Glade

Emerald Moss Glade

See it in context.

Ready when you are.

Built with Emerald Moss Glade.

How to use Emerald Moss Glade

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Glade Depths

Mossy Light

Tranquil Path

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Emerald Moss Glade