Back to palettes

Palette

Verdant Woodland Shade

A peaceful gradient of green, from deep forest shadows to fresh spring leaves.

monochromenatural5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B4D3E#2A604D#3B745C#5AA17A#77B696

Palette guide

How to use Verdant Woodland Shade

Overview

The Verdant Woodland Shade palette offers a rich, monochromatic journey through deep forest greens, perfect for evoking a sense of calm and natural depth. Beginning with the profound #1B4D3E, it gradually lightens through #2A604D and #3B745C, culminating in the serene #5AA17A and #77B696. This cohesive gradient is ideal for designers aiming to create sophisticated, harmonious, and organic visuals without relying on multiple hues. It provides excellent versatility for establishing visual hierarchy and mood. Developers can utilize this palette to build user interfaces that feel grounded, peaceful, and deeply connected to nature's tranquility.

Best used for

  • Luxury eco-resort branding
  • Nature documentary visual identity
  • Sustainable product packaging
  • Meditation app design
  • Forestry and conservation websites
  • Elegant interior decor concepts

Suggested color roles

primary

Designate #1B4D3E as the foundational primary color for headers, main backgrounds, or large brand elements, providing deep stability.

secondary

Use #2A604D for subheadings, navigation, or secondary content blocks, maintaining depth while offering subtle distinction.

accent

Highlight key information or calls-to-action with #5AA17A, its brighter tone offering a gentle but effective focal point.

background

Employ #77B696 for light, airy backgrounds, ensuring excellent readability for dark text and a fresh overall feel.

text

For body text, use a dark charcoal or black. For headings and important text on lighter greens, #1B4D3E offers superb contrast and elegance.

Accessibility notes

  • Ensure strong contrast when pairing darker shades like #1B4D3E or #2A604D with lighter ones like #77B696 for text.
  • Avoid using adjacent shades like #3B745C on #2A604D for small text, as contrast may be insufficient.
  • For interactive elements, ensure the accent color provides clear visual feedback and sufficient contrast against its background.
  • Always verify text contrast ratios with WCAG guidelines, especially for smaller font sizes.

Recommended combinations

Deep Forest Canopy

Creates a profound sense of depth and contrast, ideal for powerful visual statements or clear hierarchy.

#1B4D3E · #2A604D · #77B696

Spring Leaf Glow

Perfect for lighter, more energetic sections, bringing a fresh and inviting feel to UI elements.

#3B745C · #5AA17A · #77B696

Woodland Path

Offers a subtle, harmonious gradient for background textures, illustrations, or content dividers.

#2A604D · #3B745C · #5AA17A

CSS variables

:root {
  --verdant-woodland-shade-1: #1B4D3E;
  --verdant-woodland-shade-2: #2A604D;
  --verdant-woodland-shade-3: #3B745C;
  --verdant-woodland-shade-4: #5AA17A;
  --verdant-woodland-shade-5: #77B696;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-woodland-shade": {
        1: "#1B4D3E",
        2: "#2A604D",
        3: "#3B745C",
        4: "#5AA17A",
        5: "#77B696",
      }
    }
  }
}

Related searches

monochromatic green paletteforest green color schemescalm nature color ideasdeep green web designwoodland shade colors

Palette colors

Hex values

Color 1#1B4D3E
·
Color 2#2A604D
·
Color 3#3B745C
·
Color 4#5AA17A
·
Color 5#77B696
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
3.1:1AA18
4.1:1AA18
2
1.3:1Fail
1.3:1Fail
2.4:1Fail
3.1:1AA18
3
1.8:1Fail
1.3:1Fail
1.8:1Fail
2.3:1Fail
4
3.1:1AA18
2.4:1Fail
1.8:1Fail
1.3:1Fail
5
4.1:1AA18
3.1:1AA18
2.3:1Fail
1.3:1Fail

Similar palettes

More like Verdant Woodland Shade

View all monochrome