Back to palettes

Palette

Verdant Canopy Shade

Explores the lush, layered depths of a forest canopy with rich and varied shades of green.

monochromenatural5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#38761D#6A994E#A7C957#CCDB63#E6ECC7

Palette guide

How to use Verdant Canopy Shade

Overview

The Verdant Canopy Shade palette explores the lush, layered depths of a forest canopy with a vibrant range of greens. From the deep, grounding `#38761D` to the bright, cheerful `#CCDB63`, and supported by the soft, airy `#E6ECC7`, this palette is a celebration of natural vitality. It's ideal for designers and developers looking to create fresh, organic, and inviting experiences. The harmonious progression of these greens, including the balanced `#6A994E` and the clear `#A7C957`, makes it perfect for conveying growth, freshness, and a gentle connection to the natural world across various digital and print applications.

Best used for

  • Health and wellness apps with a natural feel
  • Garden center or plant nursery branding
  • Children's educational materials about nature
  • Spring-themed event invitations and decor
  • Fresh produce market website design
  • Sustainable living blog or content platforms

Suggested color roles

primary

Use `#6A994E` as the inviting main green, conveying balance and freshness.

secondary

Employ `#38761D` for deep anchors, strong headings, or footers, providing a solid foundation.

accent

Apply `#CCDB63` for bright calls to action, highlights, or interactive elements to add energy.

background

Utilize `#E6ECC7` as a soft, airy background that enhances the natural feel.

text

Choose `#38761D` for primary text on light backgrounds for excellent readability and a harmonious look.

Accessibility notes

  • Ensure `#38761D` text on `#E6ECC7` provides strong contrast, meeting WCAG AA standards.
  • Be cautious using `#CCDB63` or `#A7C957` for small text, especially on lighter backgrounds, due to potential low contrast.
  • Use `#6A994E` for larger text or interactive elements on lighter backgrounds for better visibility.
  • Always verify contrast ratios for all text and UI elements to ensure accessibility for all users.

Recommended combinations

Fresh & Vibrant

Creates a lively, high-contrast look, ideal for banners or key feature sections.

#38761D · #CCDB63 · #E6ECC7

Layered Greens

Excellent for showcasing depth and variety, perfect for illustrations or infographics.

#6A994E · #A7C957 · #38761D

Light & Airy

Ideal for soft backgrounds, headers, or elements that need a delicate, refreshing touch.

#A7C957 · #CCDB63 · #E6ECC7

CSS variables

:root {
  --verdant-canopy-shade-2-1: #38761D;
  --verdant-canopy-shade-2-2: #6A994E;
  --verdant-canopy-shade-2-3: #A7C957;
  --verdant-canopy-shade-2-4: #CCDB63;
  --verdant-canopy-shade-2-5: #E6ECC7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-shade-2": {
        1: "#38761D",
        2: "#6A994E",
        3: "#A7C957",
        4: "#CCDB63",
        5: "#E6ECC7",
      }
    }
  }
}

Related searches

lush green color palettemonochrome green designfresh nature colorsgarden inspired palettelight green branding

Palette colors

Hex values

Color 1#38761D
·
Color 2#6A994E
·
Color 3#A7C957
·
Color 4#CCDB63
·
Color 5#E6ECC7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
3.7:1AA18
4.6:1AA
2
1.7:1Fail
1.8:1Fail
2.2:1Fail
2.7:1Fail
3
2.9:1Fail
1.8:1Fail
1.2:1Fail
1.5:1Fail
4
3.7:1AA18
2.2:1Fail
1.2:1Fail
1.2:1Fail
5
4.6:1AA
2.7:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Verdant Canopy Shade

View all monochrome