Back to palettes

Palette

Verdant Canopy Dream

A soothing palette inspired by the rich, varied greens of a sun-dappled, thriving forest canopy.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0C380C#2C5F2D#5E8C5E#9BB99B#D0E0D0

Palette guide

How to use Verdant Canopy Dream

Overview

The Verdant Canopy Dream palette offers a soothing collection inspired by a sun-dappled forest canopy, perfect for creating tranquil and natural designs. It ranges from a very deep, grounding green #0C380C, through balanced mid-tones like #2C5F2D and #5E8C5E, to lighter, airy shades such as #9BB99B and the almost neutral #D0E0D0. This palette is ideal for projects that aim to evoke peace, natural beauty, and a sense of calm. Designers and developers can leverage these shades to craft interfaces and branding that feel organic, serene, and deeply connected to nature's gentle embrace.

Best used for

  • Nature-themed educational content
  • Eco-conscious fashion or home goods
  • Relaxation and meditation apps
  • Organic food packaging
  • Sustainable living blogs
  • Serene interior design concepts

Suggested color roles

primary

A very deep, grounding green #0C380C, excellent for strong brand elements, primary navigation, or impactful headings.

secondary

A rich, deep green #2C5F2D, suitable for subheadings, secondary calls to action, or prominent informational sections.

accent

A balanced, natural green #5E8C5E, ideal for subtle highlights, interactive elements, or decorative details that require a gentle pop.

background

A very light, muted green-grey #D0E0D0, providing a soft, clean canvas that allows content to breathe and feel natural.

text

For body text on #D0E0D0, a dark charcoal or black offers optimal readability. Use #0C380C for headings to establish clear hierarchy.

Accessibility notes

  • #0C380C and #2C5F2D provide excellent contrast for text on #D0E0D0 or white backgrounds.
  • #5E8C5E and #9BB99B may need to be used with larger text sizes or bolding to ensure WCAG AA contrast on light backgrounds.
  • Ensure interactive elements have sufficient contrast in all states (normal, hover, focus).
  • Always use a contrast checker to validate readability for all content.

Recommended combinations

Deep Forest Calm

Use for strong branding, primary calls to action, or high-contrast, serene layouts.

#0C380C · #2C5F2D · #D0E0D0

Sun-Dappled Path

Ideal for soft, layered backgrounds, subtle UI elements, or calm informational sections.

#D0E0D0 · #9BB99B · #5E8C5E

Gentle Contrast

Good for secondary buttons, emphasized text, or card elements that need a clear, yet soft, distinction.

#2C5F2D · #9BB99B · #0C380C

CSS variables

:root {
  --verdant-canopy-dream-1: #0C380C;
  --verdant-canopy-dream-2: #2C5F2D;
  --verdant-canopy-dream-3: #5E8C5E;
  --verdant-canopy-dream-4: #9BB99B;
  --verdant-canopy-dream-5: #D0E0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-dream": {
        1: "#0C380C",
        2: "#2C5F2D",
        3: "#5E8C5E",
        4: "#9BB99B",
        5: "#D0E0D0",
      }
    }
  }
}

Related searches

tranquil forest palettenatural green color schemeserene nature colorseco-friendly UI designmuted green branding

Palette colors

Hex values

Color 1#0C380C
·
Color 2#2C5F2D
·
Color 3#5E8C5E
·
Color 4#9BB99B
·
Color 5#D0E0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.4:1AA18
6.2:1AA
9.6:1AAA
2
1.8:1Fail
1.9:1Fail
3.5:1AA18
5.5:1AA
3
3.4:1AA18
1.9:1Fail
1.8:1Fail
2.8:1Fail
4
6.2:1AA
3.5:1AA18
1.8:1Fail
1.6:1Fail
5
9.6:1AAA
5.5:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Verdant Canopy Dream

View all earth