Palette

Mossy Glade Retreat

Journey into a tranquil, hidden forest glade, alive with varying shades of moss and leafy greens.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F2F#4B6F4F#799D79#AFCEA7#E1EBDC

Palette guide

How to use Mossy Glade Retreat

Overview

The Mossy Glade Retreat palette captures the essence of a tranquil, hidden forest glade with its harmonious blend of mossy and leafy greens. From the deep #2F4F2F to the soft #E1EBDC, this palette offers a natural gradient of verdant tones. The grounding #4B6F4F and the balanced #799D79 bridge the intensity of the darker shades with the ethereal lightness of #AFCEA7. This collection is ideal for designers seeking to convey peace, growth, and organic beauty. It's perfectly suited for creating serene digital environments, botanical branding, or any project that benefits from a connection to untouched nature, providing both depth and a refreshing lightness.

Best used for

Botanical product packaging
Yoga and meditation app interfaces
Environmental non-profit branding
Natural skincare website design
Garden design planning tools
Educational materials on ecosystems

Suggested color roles

primary

Use #2F4F2F for strong, anchoring elements like headers or footers, establishing a deep, natural foundation.

secondary

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

accent

Employ #799D79 or #AFCEA7 for interactive elements, highlights, or graphical details, bringing a fresh, inviting touch.

background

Utilize #E1EBDC as a clean, airy background, ensuring content is legible and the design feels spacious.

text

For primary body text, #2F4F2F offers excellent contrast against #E1EBDC, creating a comfortable reading experience.

Accessibility notes

Ensure #2F4F2F text on #E1EBDC background meets WCAG AA contrast standards.
Be cautious using #AFCEA7 for small text on #E1EBDC; reserve for larger headings or decorative elements.
Test interactive elements with #4B6F4F for sufficient contrast in both normal and hover states.
Consider using a slightly darker version of #799D79 for link underlines to improve visibility.

Recommended combinations

Deep Forest Calm

Creates a sophisticated, calming brand presence, with deep green as primary, medium green for details, and near-white for background.

#2F4F2F · #4B6F4F · #E1EBDC

Glade Light

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

#4B6F4F · #799D79 · #E1EBDC

Verdant Layers

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

#799D79 · #AFCEA7 · #E1EBDC

CSS variables

:root {
  --mossy-glade-retreat-1: #2F4F2F;
  --mossy-glade-retreat-2: #4B6F4F;
  --mossy-glade-retreat-3: #799D79;
  --mossy-glade-retreat-4: #AFCEA7;
  --mossy-glade-retreat-5: #E1EBDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-glade-retreat": {
        1: "#2F4F2F",
        2: "#4B6F4F",
        3: "#799D79",
        4: "#AFCEA7",
        5: "#E1EBDC",
      }
    }
  }
}

Hex values

Color 1#2F4F2F

Color 2#4B6F4F

Color 3#799D79

Color 4#AFCEA7

Color 5#E1EBDC

Accessibility

Contrast checker

1.6:1Fail

3:1AA18

5.4:1AA

7.5:1AAA

1.6:1Fail

1.9:1Fail

3.3:1AA18

4.6:1AA

3:1AA18

1.9:1Fail

1.8:1Fail

2.5:1Fail