Back to palettes

Palette

Sylvan Glade

Vibrant and deep greens capture the lush, untouched beauty of a hidden glade within a magical forest.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E8B57#5CB87C#A2D8B1#1F6C41#0F4A2C

Palette guide

How to use Sylvan Glade

Overview

The Sylvan Glade palette captures the lush, untouched beauty of a hidden forest glade with its vibrant and deep greens. Featuring a lively #2E8B57, a fresh #5CB87C, a softer #A2D8B1, a rich #1F6C41, and an intense #0F4A2C, this collection is genuinely useful for designers and developers seeking a natural, vibrant, and deeply refreshing aesthetic. These colors are excellent for projects related to environmental conservation, outdoor adventures, botanical themes, or any design needing to convey vitality and growth. It's a versatile palette that promises to infuse designs with the invigorating energy and profound tranquility of a thriving woodland ecosystem.

Best used for

  • Environmental and conservation organization branding
  • Outdoor adventure and recreation websites
  • Botanical and gardening product packaging
  • Health and wellness app interfaces
  • Sustainable and eco-conscious product design
  • Nature documentary graphics and titles

Suggested color roles

primary

Utilize #2E8B57 as a strong, vibrant primary color for headlines, main content areas, or brand logos, conveying growth and nature.

secondary

Employ #5CB87C for secondary content, navigation, or as a fresh complementary hue, adding brightness and vitality.

accent

Introduce #0F4A2C as a deep, rich accent for calls to action, important details, or to add grounding depth to the design.

background

The light #A2D8B1 provides a clean, airy background that allows the deeper greens to stand out and ensures readability.

text

Pair with a crisp white or a very light grey for optimal readability on darker greens, or use #1F6C41 for text on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using lighter greens like #A2D8B1 for text on backgrounds, especially if they are also green.
  • Prioritize high contrast for critical text elements by pairing deep greens (#0F4A2C, #1F6C41) with white or very light text.
  • Avoid using light text on #5CB87C without careful contrast checking to ensure readability for all users.
  • Interactive elements should have distinct visual states to ensure clarity, especially with a predominantly green palette.

Recommended combinations

Deep Forest

Excellent for establishing a strong, grounding base, ideal for footers, robust branding, or sections needing depth.

#0F4A2C · #1F6C41 · #2E8B57

Lush Canopy

Perfect for creating layered, vibrant designs, such as illustrations of foliage, content cards, or refreshing backgrounds.

#2E8B57 · #5CB87C · #A2D8B1

Vibrant Contrast

Use for clear visual hierarchy, combining depth with lightness and a vibrant accent for navigation or key informational sections.

#0F4A2C · #A2D8B1 · #5CB87C

CSS variables

:root {
  --sylvan-glade-1: #2E8B57;
  --sylvan-glade-2: #5CB87C;
  --sylvan-glade-3: #A2D8B1;
  --sylvan-glade-4: #1F6C41;
  --sylvan-glade-5: #0F4A2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sylvan-glade": {
        1: "#2E8B57",
        2: "#5CB87C",
        3: "#A2D8B1",
        4: "#1F6C41",
        5: "#0F4A2C",
      }
    }
  }
}

Related searches

lush green paletteforest colors vibrantnature brand colorsdeep woodland schemeecological design

Palette colors

Hex values

Color 1#2E8B57
·
Color 2#5CB87C
·
Color 3#A2D8B1
·
Color 4#1F6C41
·
Color 5#0F4A2C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
1.5:1Fail
2.4:1Fail
2
1.7:1Fail
1.5:1Fail
2.6:1Fail
4.2:1AA18
3
2.6:1Fail
1.5:1Fail
4:1AA18
6.4:1AA
4
1.5:1Fail
2.6:1Fail
4:1AA18
1.6:1Fail
5
2.4:1Fail
4.2:1AA18
6.4:1AA
1.6:1Fail

Similar palettes

More like Sylvan Glade

View all earth
Botanical Groundcover Greens
Emerald Canopy Hush
Emerald Forest Canopy
Emerald Forest Depths
Enchanted Glade Dew
Enchanted Glade Dew