Palette

Verdant Canopy Shade

Lush and shadowy, reflecting the cool, filtered light under a dense 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 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

#004B49#026670#9FEDD7#C5E0D8#F3F3F3

Palette guide

How to use Verdant Canopy Shade

Overview

The Verdant Canopy Shade palette offers a lush and shadowy collection of greens and teals, reflecting the cool, filtered light found under a dense forest canopy. With deep tones like `#004B49` and `#026670`, complemented by the refreshing brightness of `#9FEDD7` and the crispness of `#F3F3F3`, this palette creates a sophisticated yet natural atmosphere. Designers and developers can leverage these colors to build elegant, calming interfaces or brand identities that evoke depth and tranquility. It's particularly effective for projects aiming for a modern aesthetic with a strong connection to nature, suitable for both dark and light themes.

Best used for

Luxury spa or retreat branding
Sophisticated tech interfaces with a natural touch
High-end eco-friendly product lines
Interior design for calm, modern spaces
Photography portfolios with moody aesthetics
Art gallery website design

Suggested color roles

primary

Use `#026670` as the inviting main teal-green, conveying depth and serenity.

secondary

Employ `#004B49` for the darkest elements, providing a strong, grounding base.

accent

Apply `#9FEDD7` for bright, refreshing highlights, interactive elements, or key information.

background

Utilize `#F3F3F3` as a clean, near-white background to maximize contrast and brightness.

text

Choose `#004B49` for primary text on light backgrounds for excellent readability and a sophisticated feel.

Accessibility notes

Ensure `#004B49` and `#026670` text on `#F3F3F3` backgrounds provides excellent contrast, meeting WCAG AA standards.
Use `#9FEDD7` for larger headings or accents on darker backgrounds, but avoid for small body text.
Verify that interactive elements using lighter shades like `#9FEDD7` have sufficient contrast with surrounding elements.
Always check all text and UI element contrast ratios to ensure accessibility for all users.

Recommended combinations

Deep Contrast

Creates a striking, high-contrast look, perfect for hero sections or call-to-action buttons.

#004B49 · #9FEDD7 · #F3F3F3

Teal Harmony

Ideal for layered designs, showcasing the harmonious blend of teal and soft greens.

#026670 · #9FEDD7 · #C5E0D8

Light & Cool

Excellent for soft, airy backgrounds or elements that require a delicate, refreshing touch.

#C5E0D8 · #9FEDD7 · #F3F3F3

CSS variables

:root {
  --verdant-canopy-shade-1: #004B49;
  --verdant-canopy-shade-2: #026670;
  --verdant-canopy-shade-3: #9FEDD7;
  --verdant-canopy-shade-4: #C5E0D8;
  --verdant-canopy-shade-5: #F3F3F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-canopy-shade": {
        1: "#004B49",
        2: "#026670",
        3: "#9FEDD7",
        4: "#C5E0D8",
        5: "#F3F3F3",
      }
    }
  }
}

Hex values

Color 1#004B49

Color 2#026670

Color 3#9FEDD7

Color 4#C5E0D8

Color 5#F3F3F3

Accessibility

Contrast checker

1.5:1Fail

7.4:1AAA

7.1:1AAA

9:1AAA

1.5:1Fail

5:1AA

4.8:1AA

6:1AA

7.4:1AAA

5:1AA

1:1Fail

1.2:1Fail

7.1:1AAA

4.8:1AA

1:1Fail

1.3:1Fail

9:1AAA

6:1AA

1.2:1Fail

1.3:1Fail

Similar palettes

More like Verdant Canopy Shade

Botanical Groundcover Greens

Deep Forest Fern

Deep Forest Undergrowth