Palette

Rainforest Canopy Light

Captures the interplay of dappled sunlight filtering through the dense green canopy of a vibrant rainforest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#228B22#3CB371#90EE90#ADD8E6#F0F8FF

Palette guide

How to use Rainforest Canopy Light

Overview

The "Rainforest Canopy Light" palette (Version 3) beautifully captures the interplay of dappled sunlight filtering through the dense green canopy of a vibrant rainforest, introducing soft blues and near-white. It features a strong forest green #228B22, a calming medium sea green #3CB371, and a refreshing light green #90EE90. Complementing these are a serene light blue #ADD8E6 and a crisp alice blue #F0F8FF. This palette is perfect for designers and developers aiming to evoke natural serenity, freshness, and an open, airy feel, ideal for projects that require a touch of tranquility and vibrant natural energy.

Best used for

Wellness and spa branding
Serene website backgrounds
Nature photography displays
Eco-conscious product designs
Educational materials on nature
Relaxation and meditation apps

Suggested color roles

primary

Utilize #228B22 (Forest Green) for core elements like headings, primary calls-to-action, or main branding, providing a stable, natural foundation.

secondary

Employ #3CB371 (Medium Sea Green) for supporting content, subheadings, or secondary buttons, offering a harmonious and refreshing green.

accent

Introduce #ADD8E6 (Light Blue) for subtle highlights, interactive elements, or graphical accents that need a soft, airy contrast.

background

Apply #F0F8FF (Alice Blue) as a clean, expansive background, creating an open, serene canvas that lets the greens and blue shine.

text

For optimal readability on light backgrounds like #F0F8FF, use a dark, contrasting color such as #228B22 or a standard charcoal black.

Accessibility notes

The deep #228B22 offers excellent contrast against #F0F8FF for body text and headings, ensuring high readability.
Be cautious when using #90EE90 or #ADD8E6 for small text on #F0F8FF; ensure they meet WCAG AA contrast standards, possibly requiring larger font sizes.
The #3CB371 provides good contrast against #F0F8FF, suitable for interactive elements and important information.
Avoid pairing #ADD8E6 with #90EE90 for text unless the font size is very large, as contrast might be insufficient.

Recommended combinations

Sky Canopy

Ideal for hero sections or prominent features, showcasing the blend of deep greens with open sky and light.

#228B22 · #F0F8FF · #ADD8E6

Misty Greens

Excellent for creating a layered, serene feel in content blocks, infographics, or visual elements with a soft, natural gradient.

#3CB371 · #90EE90 · #ADD8E6

Fresh Air

Use for clean, refreshing UI components, testimonials, or informational displays, conveying clarity and natural balance.

#228B22 · #3CB371 · #F0F8FF

CSS variables

:root {
  --rainforest-canopy-light-3-1: #228B22;
  --rainforest-canopy-light-3-2: #3CB371;
  --rainforest-canopy-light-3-3: #90EE90;
  --rainforest-canopy-light-3-4: #ADD8E6;
  --rainforest-canopy-light-3-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainforest-canopy-light-3": {
        1: "#228B22",
        2: "#3CB371",
        3: "#90EE90",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#228B22

Color 2#3CB371

Color 3#90EE90

Color 4#ADD8E6

Color 5#F0F8FF

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

2.9:1Fail

4.1:1AA18

1.6:1Fail

1.9:1Fail

1.7:1Fail

2.5:1Fail

3.1:1AA18

1.9:1Fail

1.1:1Fail

1.3:1Fail

2.9:1Fail

1.7:1Fail

1.1:1Fail

1.4:1Fail

4.1:1AA18

2.5:1Fail

1.3:1Fail

1.4:1Fail

Similar palettes

More like Rainforest Canopy Light

View all earth

Canopy Emerald Burst

Desert Oasis Bloom

Emerald Canopy Shroud

Emerald Canyon Echo

Emerald Rainforest Mist

Forest Canopy Light