Palette

Emerald Glade

A harmonious blend of deep greens reflecting the serene and lush beauty of a tranquil forest glade.

monochromenatural5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F5F40#5E8D6B#8DBA9C#477D57#1E4A34

Palette guide

How to use Emerald Glade

Overview

The Emerald Glade palette offers a harmonious and serene collection of deep, muted greens, perfectly capturing the tranquil beauty of a secluded forest. With grounding tones like #1E4A34 and #2F5F40, it establishes a sense of stability and natural depth. Mid-tones such as #477D57 and #5E8D6B provide subtle variations, while #8DBA9C introduces a lighter, airy touch, mimicking dappled sunlight. This monochromatic scheme is ideal for designs that aim for a calm, sophisticated, and understated aesthetic. It’s particularly well-suited for luxury eco-friendly products, peaceful digital interfaces, or branding that emphasizes tradition and organic elegance.

Best used for

Luxury eco-lodges branding
Meditation app interfaces
High-end natural skincare packaging
Sustainable interior design concepts
Environmental impact reports
Art gallery websites

Suggested color roles

primary

Use #1E4A34 as a deep, anchoring color for headers, main navigation, or strong branding elements.

secondary

Employ #2F5F40 as a supportive, rich green for sub-sections, active states, or important text.

accent

Apply #8DBA9C as a subtle, lighter accent for highlights, soft buttons, or secondary information.

background

Utilize #5E8D6B as a mid-tone, calming background that provides depth without being too dark.

text

Pair #1E4A34 with lighter greens or white for excellent readability, or use a dark charcoal like #222222.

Accessibility notes

Ensure #8DBA9C has sufficient contrast when used with very light text; consider darker text or a darker background.
Pair #1E4A34 or #2F5F40 with white or off-white text for optimal legibility on dark backgrounds.
Be cautious with #5E8D6B and #477D57 for body text backgrounds due to their similar luminance.
Regularly check contrast ratios to comply with WCAG AA standards, especially for interactive elements.

Recommended combinations

Forest Depth

Creates a strong, grounded foundation for dark mode interfaces or sophisticated branding.

#1E4A34 · #2F5F40 · #477D57

Serene Pathway

Ideal for content sections, providing a soft background with clear, readable text.

#5E8D6B · #8DBA9C · #2F5F40

Subtle Highlight

For delicate accents or secondary information against a deep, rich backdrop.

#8DBA9C · #1E4A34 · #477D57

CSS variables

:root {
  --emerald-glade-1: #2F5F40;
  --emerald-glade-2: #5E8D6B;
  --emerald-glade-3: #8DBA9C;
  --emerald-glade-4: #477D57;
  --emerald-glade-5: #1E4A34;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-glade": {
        1: "#2F5F40",
        2: "#5E8D6B",
        3: "#8DBA9C",
        4: "#477D57",
        5: "#1E4A34",
      }
    }
  }
}

Hex values

Color 1#2F5F40

Color 2#5E8D6B

Color 3#8DBA9C

Color 4#477D57

Color 5#1E4A34

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

1.5:1Fail

1.4:1Fail

1.9:1Fail

1.8:1Fail

1.3:1Fail

2.6:1Fail

3.4:1AA18

1.8:1Fail

2.2:1Fail

4.6:1AA

1.5:1Fail

1.3:1Fail

2.2:1Fail

2.1:1Fail

1.4:1Fail

2.6:1Fail

4.6:1AA

2.1:1Fail

Similar palettes

More like Emerald Glade

Forest Canopy Verdant

Green Moss Harmony

Verdant Canopy Shade