Palette

Verdant Moss Glen

Captures the lush, vibrant greens of an ancient, moss-covered forest glade.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4A6A4E#6B8E23#9ACD32#B0E067

Palette guide

How to use Verdant Moss Glen

Overview

The Verdant Moss Glen palette captures the lush, vibrant greens of an ancient, moss-covered forest glade, brimming with natural energy. Featuring a unique blend of deep teal-green #2F4F4F, a rich forest green #4A6A4E, and lively lime-greens like #6B8E23 and #9ACD32, this collection is both grounding and invigorating. The bright #B0E067 adds a cheerful, fresh highlight, reminiscent of new growth. This palette is exceptionally well-suited for projects that demand a strong connection to nature, vibrant growth, and a touch of organic playfulness. Designers will find these hex codes ideal for crafting dynamic and inviting visuals, while developers can easily implement them for engaging UI themes.

Best used for

Eco-tourism and adventure branding
Children's nature-themed products
Fresh produce marketing
Garden and landscaping company websites
Outdoor recreation apparel
Spring holiday promotions

Suggested color roles

primary

#2F4F4F - A deep, sophisticated teal-green, excellent for establishing a unique and grounding brand identity, main headers, or foundational elements.

secondary

#4A6A4E - A rich, traditional forest green that provides strong support, ideal for subheadings, call-to-action buttons, or significant graphical elements.

accent

#9ACD32 - A bright, energetic lime green that brings a vibrant pop, perfect for interactive elements, highlights, or playful decorative touches.

background

#B0E067 - A very light, cheerful green, creating an open and airy backdrop that promotes readability and a fresh, lively feel.

text

#2F4F4F - This deep teal-green offers excellent contrast against lighter backgrounds like #B0E067, ensuring readability for body text and maintaining the palette's vibrant, natural aesthetic.

Accessibility notes

Ensure #2F4F4F text on #B0E067 background meets WCAG AA contrast for body text.
Avoid using #6B8E23 for small text on #B0E067 due to potential low contrast.
Use #9ACD32 for larger text on #2F4F4F for headings.
For interactive elements, ensure distinct hover and focus states that are easily perceivable against surrounding colors.

Recommended combinations

Glade Depths

Effective for creating depth in UI elements or illustrations, moving from darkest to brightest for contrast.

#2F4F4F · #4A6A4E · #B0E067

Lively Moss

Ideal for vibrant infographics or interactive charts, with the brighter greens highlighting key data points.

#6B8E23 · #9ACD32 · #4A6A4E

Fresh Spring

A clean and inviting layout for content, with #B0E067 as the page background, #2F4F4F for text, and #9ACD32 for accents.

#B0E067 · #2F4F4F · #9ACD32

CSS variables

:root {
  --verdant-moss-glen-1: #2F4F4F;
  --verdant-moss-glen-2: #4A6A4E;
  --verdant-moss-glen-3: #6B8E23;
  --verdant-moss-glen-4: #9ACD32;
  --verdant-moss-glen-5: #B0E067;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-moss-glen": {
        1: "#2F4F4F",
        2: "#4A6A4E",
        3: "#6B8E23",
        4: "#9ACD32",
        5: "#B0E067",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4A6A4E

Color 3#6B8E23

Color 4#9ACD32

Color 5#B0E067

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

4.7:1AA

5.8:1AA

1.5:1Fail

1.6:1Fail

3.2:1AA18

4:1AA18

2.3:1Fail

1.6:1Fail

2:1Fail

2.5:1Fail

4.7:1AA

3.2:1AA18

2:1Fail

1.2:1Fail

5.8:1AA

4:1AA18

2.5:1Fail

1.2:1Fail

Similar palettes

More like Verdant Moss Glen

Emerald Forest Canopy