Back to palettes

Palette

Verdant Glade

Lush greens and olive tones capture the vibrant life of a sun-dappled, verdant forest glade.

EarthNatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#228B22#3CB371#6B8E23#8FBC8F#C1D8C1

Palette guide

How to use Verdant Glade

Overview

The Verdant Glade palette offers a classic and refreshing range of greens, perfectly capturing the essence of a sun-dappled forest clearing. It combines the robust Forest Green #228B22 with the lively Medium Sea Green #3CB371, creating a dynamic yet balanced foundation. The earthy Olive Drab #6B8E23 adds a touch of natural warmth, while the softer Dark Sea Green #8FBC8F and the airy Pale Greyish Green #C1D8C1 brighten the overall scheme. This versatile palette is ideal for designers and developers seeking to evoke freshness, vitality, and a strong connection to nature in their branding, web designs, or digital illustrations.

Best used for

  • Nature conservation organizations
  • Outdoor recreation brands
  • Organic food and beverage packaging
  • Eco-friendly product websites
  • Gardening and landscaping design
  • Wellness and mindfulness platforms

Suggested color roles

primary

#228B22 (Forest Green) - Excellent for main navigation, key headings, or large background sections that require a strong, natural anchor.

secondary

#3CB371 (Medium Sea Green) - Use for secondary calls-to-action, subheadings, or active states, adding a vibrant and engaging touch.

accent

#6B8E23 (Olive Drab) - A distinctive earthy accent for icons, small decorative elements, or interactive highlights, providing subtle contrast.

background

#8FBC8F (Dark Sea Green) - A gentle and calming background for main content areas, ensuring readability for darker text.

text

#228B22 (Forest Green) - Provides excellent contrast for body text against lighter backgrounds like #8FBC8F or #C1D8C1, ensuring clarity.

Accessibility notes

  • #C1D8C1 used as a background requires dark text, such as #228B22 or a deep charcoal, for sufficient contrast.
  • #8FBC8F is a good background for darker text but may not contrast well with lighter greens for small text.
  • The darker greens (#228B22, #3CB371) provide good contrast with white or very light grey text.
  • Always test color combinations against WCAG accessibility standards, particularly for text on interactive elements.

Recommended combinations

Forest Core

Strong, traditional branding for outdoor gear or environmental groups.

#228B22 · #3CB371 · #6B8E23

Glade Breeze

Light and airy interfaces for health apps or serene nature photography sites.

#8FBC8F · #C1D8C1 · #3CB371

Earthy Contrast

Balanced designs for sustainable product showcases or educational content.

#6B8E23 · #228B22 · #8FBC8F

CSS variables

:root {
  --verdant-glade-1: #228B22;
  --verdant-glade-2: #3CB371;
  --verdant-glade-3: #6B8E23;
  --verdant-glade-4: #8FBC8F;
  --verdant-glade-5: #C1D8C1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-glade": {
        1: "#228B22",
        2: "#3CB371",
        3: "#6B8E23",
        4: "#8FBC8F",
        5: "#C1D8C1",
      }
    }
  }
}

Related searches

verdant green color schemeforest glade palettenatural green brandingearthy vibrant colorslush nature design

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#6B8E23
·
Color 4#8FBC8F
·
Color 5#C1D8C1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
2:1Fail
2.9:1Fail
2
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.8:1Fail
3
1.2:1Fail
1.4:1Fail
1.8:1Fail
2.5:1Fail
4
2:1Fail
1.2:1Fail
1.8:1Fail
1.4:1Fail
5
2.9:1Fail
1.8:1Fail
2.5:1Fail
1.4:1Fail

Similar palettes

More like Verdant Glade

View all Earth