Palette

Mossy Glen

A tranquil collection of greens, capturing the quiet depths and verdant richness of an ancient, moss-covered glen.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6B4C#7A9E75#B8D4AE#364A35#627F5C

Palette guide

How to use Mossy Glen

Overview

The Mossy Glen palette is a tranquil collection of greens, capturing the quiet depths and verdant richness of an ancient, moss-covered glen. From the deep #364A35 to the airy #B8D4AE, this palette offers a harmonious gradient of natural tones. The grounding #4F6B4C and #627F5C provide stability, while #7A9E75 bridges the gap to the lighter, refreshing hues. It's an excellent choice for designers aiming to create a serene, organic, and deeply natural aesthetic. Ideal for projects that require a sense of calm, growth, and connection to untouched nature, this palette offers versatility for both subtle backgrounds and vibrant accents, ensuring a cohesive and inviting visual experience.

Best used for

Nature photography websites
Eco-friendly product branding
Wellness and spa service marketing
Environmental education materials
Outdoor recreational activity platforms
Botanical illustration and design

Suggested color roles

primary

Utilize #364A35 for strong, anchoring elements like headers or footers, establishing a profound, natural foundation.

secondary

Apply #4F6B4C for significant content blocks, subheadings, or primary buttons, providing depth and readability.

accent

Employ #7A9E75 or #627F5C for interactive elements, highlights, or graphical details, bringing a fresh, inviting touch.

background

Use #B8D4AE as a clean, serene background for content areas, ensuring excellent readability and a spacious feel.

text

For primary body text, #364A35 offers excellent contrast against #B8D4AE, creating a comfortable reading experience.

Accessibility notes

Ensure #364A35 text on #B8D4AE background meets WCAG AA contrast standards.
Be cautious using #7A9E75 for small text on #B8D4AE; reserve for larger headings or decorative elements.
Test interactive elements with #4F6B4C for sufficient contrast in both normal and hover states.
Provide alternative text for any color-coded information to aid users with color vision deficiencies.

Recommended combinations

Deep Glen

Creates a sophisticated, grounded brand presence, with deep green as primary, medium green for details, and pale green for background.

#364A35 · #4F6B4C · #B8D4AE

Verdant Calm

Ideal for a fresh, welcoming UI, using mid-green for content, lighter green for accents, and very light green for spaciousness.

#4F6B4C · #7A9E75 · #B8D4AE

Mossy Layers

Offers an airy, natural feel for illustrations or infographics, conveying growth and lightness through harmonious greens.

#627F5C · #7A9E75 · #B8D4AE

CSS variables

:root {
  --mossy-glen-1: #4F6B4C;
  --mossy-glen-2: #7A9E75;
  --mossy-glen-3: #B8D4AE;
  --mossy-glen-4: #364A35;
  --mossy-glen-5: #627F5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-glen": {
        1: "#4F6B4C",
        2: "#7A9E75",
        3: "#B8D4AE",
        4: "#364A35",
        5: "#627F5C",
      }
    }
  }
}

Hex values

Color 1#4F6B4C

Color 2#7A9E75

Color 3#B8D4AE

Color 4#364A35

Color 5#627F5C

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

1.6:1Fail

1.3:1Fail

2:1Fail

1.9:1Fail

3.2:1AA18

1.5:1Fail

3.7:1AA18

1.9:1Fail

6:1AA

2.8:1Fail

1.6:1Fail

3.2:1AA18

6:1AA

2.2:1Fail

1.3:1Fail

1.5:1Fail

2.8:1Fail

2.2:1Fail

Similar palettes

More like Mossy Glen

View all earth

Forest Canopy Echoes

Enchanted Forest Lumina

Forest Canopy

Forest Fern Canopy

Forest Floor Moss

Forest Whisper Canopy