Palette

Verdant Canopy Light

Captures the dappled sunlight filtering through the dense, vibrant canopy of an ancient forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6D8D5A#4A6E3B#2F5224#1E3B16#0D2A08

Palette guide

How to use Verdant Canopy Light

Overview

The Verdant Canopy Light palette offers a sophisticated range of deep, natural greens, evoking the dappled sunlight filtering through an ancient, dense forest. This collection is defined by its rich, earthy tones, from the muted `#6D8D5A` to the profound depth of `#0D2A08`. Designers can leverage the balanced `#4A6E3B` as a primary, complemented by the grounding `#2F5224` and `#1E3B16` for depth and texture. This palette is ideal for projects requiring a sense of heritage, luxury, or profound connection to nature. Developers will appreciate the cohesive, dark-leaning scheme for creating immersive and elegant digital experiences.

Best used for

Rustic and heritage brand identities
Luxury outdoor apparel and gear
Conservation and environmental non-profit websites
Sophisticated botanical illustrations
Interior decor for studies or libraries
Packaging for artisan coffee or gourmet teas

Suggested color roles

primary

Use `#4A6E3B` as the core green, providing a rich and grounding presence.

secondary

Employ `#2F5224` for deeper sections, footers, or strong visual anchors.

accent

Apply `#6D8D5A` for subtle highlights, larger headings, or interactive elements on dark backgrounds.

background

Utilize `#0D2A08` as a dramatic, deep background for an immersive feel, or a light near-white for contrast.

text

Choose `#6D8D5A` for text on darker backgrounds like `#0D2A08` to ensure readability and elegance, or a dark charcoal on light backgrounds.

Accessibility notes

Ensure `#6D8D5A` text on `#0D2A08` or `#1E3B16` backgrounds meets WCAG AA contrast standards.
Avoid using `#1E3B16` or `#2F5224` for small text on very dark backgrounds; opt for lighter shades.
Use a contrast checker for all text and interactive elements, especially when colors are close in value.
Consider a slightly brighter accent for interactive elements if they need to pop dramatically on dark backgrounds.

Recommended combinations

Deep Forest

Creates a strong, layered depth, ideal for hero sections or brand statements.

#0D2A08 · #2F5224 · #6D8D5A

Muted Depth

Excellent for subtle gradients and sophisticated visual storytelling in UI elements.

#1E3B16 · #4A6E3B · #6D8D5A

Dark & Subtle

Perfect for backgrounds and textural elements that require a rich, understated presence.

#2F5224 · #4A6E3B · #0D2A08

CSS variables

:root {
  --verdant-canopy-light-1: #6D8D5A;
  --verdant-canopy-light-2: #4A6E3B;
  --verdant-canopy-light-3: #2F5224;
  --verdant-canopy-light-4: #1E3B16;
  --verdant-canopy-light-5: #0D2A08;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-light": {
        1: "#6D8D5A",
        2: "#4A6E3B",
        3: "#2F5224",
        4: "#1E3B16",
        5: "#0D2A08",
      }
    }
  }
}

Hex values

Color 1#6D8D5A

Color 2#4A6E3B

Color 3#2F5224

Color 4#1E3B16

Color 5#0D2A08

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3.3:1AA18

4.1:1AA18

1.6:1Fail

1.5:1Fail

2.1:1Fail

2.7:1Fail

2.4:1Fail

1.5:1Fail

1.4:1Fail

1.7:1Fail

3.3:1AA18

2.1:1Fail

1.4:1Fail

1.3:1Fail

4.1:1AA18

2.7:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Verdant Canopy Light