Palette

Deep Mossy Glen

Immerse yourself in the cool, shaded tranquility of a deep mossy glen, rich with muted greens.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#5F7F7F#8F9F9F#BFCECE#E0EDED

Palette guide

How to use Deep Mossy Glen

Overview

The Deep Mossy Glen palette evokes the cool, shaded tranquility of a forest floor, offering a serene and earthy aesthetic. Dominated by muted greens and soft greys, this palette includes foundational tones like #2F4F4F and #5F7F7F, transitioning to lighter, airy shades such as #BFCECE and #E0EDED. It's ideal for designs seeking a natural, calming, and understated elegance. Designers and developers can leverage its harmonious progression to create visual depth without overwhelming the user, perfect for interfaces that prioritize comfort and organic appeal.

Best used for

Eco-friendly brand identity
Spa and wellness websites
Nature-themed editorial design
Calming mobile app interfaces
Sustainable product packaging
Interior design mood boards

Suggested color roles

primary

Use #2F4F4F as a deep, stable foundation for large sections or primary branding elements, conveying natural authority.

secondary

Employ #5F7F7F for supportive elements like secondary navigation, borders, or content containers, maintaining a gentle harmony.

accent

Apply #BFCECE sparingly for subtle highlights, interactive states, or decorative details to add a soft, understated glow.

background

Utilize #E0EDED as a clean, light background, providing excellent readability for darker text while maintaining an airy feel.

text

For body text, #2F4F4F provides strong contrast and legibility on lighter backgrounds. For headings, a crisp black or charcoal can also work.

Accessibility notes

Ensure sufficient contrast between #2F4F4F text and #E0EDED background for optimal readability (WCAG AA).
Test color combinations like #5F7F7F on #BFCECE to ensure they meet minimum contrast ratios for larger text.
Use #E0EDED for backgrounds where text needs to be easily legible, avoiding mid-tones for small font sizes.
Consider providing a dark mode option where #2F4F4F or #5F7F7F serves as the background with light text.

Recommended combinations

Forest Depths

Creates a rich, layered depth ideal for hero sections or immersive backgrounds.

#2F4F4F · #5F7F7F · #8F9F9F

Serene Calm

Perfect for clean, airy layouts where tranquility and softness are key.

#E0EDED · #BFCECE · #5F7F7F

Muted Contrast

Offers a balanced contrast for UI elements, combining dark depth with soft highlights.

#2F4F4F · #BFCECE · #E0EDED

CSS variables

:root {
  --deep-mossy-glen-1: #2F4F4F;
  --deep-mossy-glen-2: #5F7F7F;
  --deep-mossy-glen-3: #8F9F9F;
  --deep-mossy-glen-4: #BFCECE;
  --deep-mossy-glen-5: #E0EDED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-mossy-glen": {
        1: "#2F4F4F",
        2: "#5F7F7F",
        3: "#8F9F9F",
        4: "#BFCECE",
        5: "#E0EDED",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#5F7F7F

Color 3#8F9F9F

Color 4#BFCECE

Color 5#E0EDED

Accessibility

Contrast checker

2.1:1Fail

3.2:1AA18

5.5:1AA

7.4:1AAA

2.1:1Fail

1.6:1Fail

2.7:1Fail

3.6:1AA18

3.2:1AA18

1.6:1Fail

1.7:1Fail

2.3:1Fail

5.5:1AA

2.7:1Fail

1.7:1Fail

1.4:1Fail

7.4:1AAA

3.6:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Deep Mossy Glen

View all cool

Mystic Woods Veil

Emerald Grove Sanctuary