Back to palettes

Palette

Rainforest Canopy

Lush and varied greens depicting the vibrant, dense foliage of a thriving rainforest.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#228B22#3CB371#6B8E23#556B2F#006400

Palette guide

How to use Rainforest Canopy

Overview

The "Rainforest Canopy" palette presents a lush and varied spectrum of greens, perfectly capturing the dense, thriving foliage of a tropical rainforest. From the classic forest green #228B22 to the vibrant #3CB371 and the earthy #6B8E23, this collection is ideal for projects seeking an authentic, natural, and vigorous aesthetic. The deep #006400 provides a strong grounding element, while #556B2F adds a muted, organic texture. Designers can leverage these hex codes to create rich, immersive visual narratives that convey growth, vitality, and connection to nature in both digital and print mediums.

Best used for

  • Botanical garden branding
  • Nature documentary visuals
  • Outdoor apparel design
  • Organic food packaging
  • Environmental education platforms
  • Sustainable living blogs

Suggested color roles

primary

Utilize #228B22 as the dominant brand color for main headings, calls-to-action, or prominent graphical elements.

secondary

Apply #3CB371 for supporting elements, subheadings, or interactive states, providing a fresh, lively contrast.

accent

Employ #6B8E23 for distinctive highlights, infographic elements, or unique UI components to add character.

background

For a natural, muted background, consider #556B2F. For content areas, pair with a very light cream or off-white.

text

Use #006400 for primary text on light backgrounds for excellent readability, or white/light gray on dark backgrounds.

Accessibility notes

  • Ensure #3CB371 has sufficient contrast against any lighter backgrounds, especially for smaller text.
  • The olive green #6B8E23 might require careful pairing and larger font sizes for optimal text readability.
  • Use #006400 for primary text on light backgrounds to ensure strong, accessible contrast.
  • Avoid using light green text on light green backgrounds; always verify WCAG AA compliance for all pairings.

Recommended combinations

Earthy Core

Strong, traditional green base with a deeper anchor and a unique, earthy accent for visual interest.

#228B22 · #006400 · #6B8E23

Fresh Growth

Lighter, fresh green with a solid primary and a muted, earthy secondary for depth and contrast.

#3CB371 · #228B22 · #556B2F

Deep Forest

Very dark background with a slightly lighter dark green and a refreshing, vibrant accent.

#006400 · #556B2F · #3CB371

CSS variables

:root {
  --rainforest-canopy-1: #228B22;
  --rainforest-canopy-2: #3CB371;
  --rainforest-canopy-3: #6B8E23;
  --rainforest-canopy-4: #556B2F;
  --rainforest-canopy-5: #006400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainforest-canopy": {
        1: "#228B22",
        2: "#3CB371",
        3: "#6B8E23",
        4: "#556B2F",
        5: "#006400",
      }
    }
  }
}

Related searches

natural green color schemeforest green web designearth tone brandinglush jungle palettesustainable brand colors

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#6B8E23
·
Color 4#556B2F
·
Color 5#006400
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
2
1.6:1Fail
1.4:1Fail
2.2:1Fail
2.8:1Fail
3
1.2:1Fail
1.4:1Fail
1.6:1Fail
2:1Fail
4
1.4:1Fail
2.2:1Fail
1.6:1Fail
1.3:1Fail
5
1.7:1Fail
2.8:1Fail
2:1Fail
1.3:1Fail

Similar palettes

More like Rainforest Canopy

View all earth
Tropic Canopy Glade
Tropical Verdant Realm
Verdant Jungle Light
Canopy Emerald Burst
Emerald Canopy Shroud
Emerald Forest Canopy