Palette

Emerald Forest Canopy

Immerse yourself in the lush, verdant heart of an ancient forest with deep, refreshing greens.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Forest Canopy 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 Emerald Forest Canopy.

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

Data visualization

#006400#228B22#3CB371#66CDAA#8FBC8F

Palette guide

How to use Emerald Forest Canopy

Overview

The Emerald Forest Canopy palette immerses you in the lush, verdant heart of an ancient forest with deep, refreshing greens. It features the profound #006400, the robust #228B22, and the lively #3CB371, transitioning to the softer #66CDAA and the tranquil #8FBC8F. This palette is inherently natural and calming, perfect for designs that aim to convey peace, organic beauty, and a grounded connection to the environment. It's an excellent choice for eco-conscious brands, outdoor living applications, or digital interfaces seeking a refreshing, serene, and harmonious aesthetic with a strong emphasis on lush, vibrant greenery.

Best used for

Eco-friendly and sustainable branding
Outdoor adventure and nature tourism marketing
Wellness and mindful living apps
Landscape photography portfolios
Interior design for natural, calming environments
Digital art with serene forest themes

Suggested color roles

primary

Use #006400 for dominant elements, headers, or backgrounds to establish depth, stability, and a strong natural foundation.

secondary

Employ #228B22 or #3CB371 for supporting graphics, subheadings, or interactive elements, adding vibrancy and texture.

accent

Apply #8FBC8F for subtle highlights, delicate patterns, or light interactive elements to introduce softness and freshness.

background

Utilize #8FBC8F for clean, airy backgrounds that allow the deeper greens to shine while maintaining a natural feel.

text

For body text, use a dark charcoal like #333333. For headlines on lighter backgrounds, #006400 provides excellent readability. Use white for text on #006400.

Accessibility notes

Ensure #006400 or #228B22 text on #8FBC8F meets WCAG contrast standards.
Avoid using #8FBC8F for small text on light backgrounds; it's best for large headlines or accents.
The lighter greens #66CDAA and #8FBC8F may have low contrast when used together; separate them.
Pair #006400 with #8FBC8F for a high-contrast, accessible combination for primary content.

Recommended combinations

Forest Depths

Ideal for creating a profound, immersive feel in branding, website hero sections, or illustrations with natural textures.

#006400 · #228B22 · #3CB371

Canopy Light

Perfect for light UI elements, background gradients, or decorative patterns that need to convey freshness and serenity.

#66CDAA · #8FBC8F · #3CB371

Natural Contrast

Use for impactful call-to-action buttons, key highlights, or sections that require a bold yet naturally inviting visual statement.

#006400 · #8FBC8F · #228B22

CSS variables

:root {
  --emerald-forest-canopy-1: #006400;
  --emerald-forest-canopy-2: #228B22;
  --emerald-forest-canopy-3: #3CB371;
  --emerald-forest-canopy-4: #66CDAA;
  --emerald-forest-canopy-5: #8FBC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-forest-canopy": {
        1: "#006400",
        2: "#228B22",
        3: "#3CB371",
        4: "#66CDAA",
        5: "#8FBC8F",
      }
    }
  }
}

Hex values

Color 1#006400

Color 2#228B22

Color 3#3CB371

Color 4#66CDAA

Color 5#8FBC8F

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

3.9:1AA18

3.5:1AA18

1.7:1Fail

1.6:1Fail

2.3:1Fail

2:1Fail

2.8:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail