Palette

Tropical Rainforest Canopy

Lush and vivid greens reflecting the dense, life-filled canopy of a thriving rainforest.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#004B49#006D6F#009C9D#00C2C3#003A3A

Palette guide

How to use Tropical Rainforest Canopy

Overview

The Tropical Rainforest Canopy palette reflects the dense, life-filled canopy of a thriving rainforest with lush and vivid greens. This collection features a deep, mysterious teal #004B49, a rich forest green #006D6F, a bright aquamarine #009C9D, a vibrant turquoise #00C2C3, and a very dark #003A3A. Designers can leverage these hues to create sophisticated yet energetic designs, perfect for environmental initiatives, tech companies focusing on sustainability, or dynamic digital experiences. Developers will find these hex codes ideal for building interfaces that convey depth, freshness, and a strong connection to nature, ensuring a consistent and engaging visual theme.

Best used for

Environmental non-profit branding
Sustainable tech company websites
Nature documentary graphics
Outdoor adventure gear marketing
Aquatic or marine themed designs
Modern eco-tourism promotions

Suggested color roles

primary

Use #004B49 as a strong, grounding primary color for main sections or deep backgrounds, conveying stability.

secondary

Employ #009C9D for subheadings or key interactive elements, adding a vibrant, refreshing touch.

accent

Introduce #00C2C3 for highlights, icons, or progress bars, providing a bright, energetic pop.

background

Apply #003A3A as a deep, immersive background for a sophisticated and focused user experience.

text

For body text, white or a very light grey (#F0F0F0) offers excellent readability against #003A3A and #004B49.

Accessibility notes

Ensure high contrast for text on #00C2C3 by using dark colors or black.
Verify readability of white text on #004B49, #006D6F, #009C9D, and #003A3A.
Avoid using #00C2C3 text on #009C9D background due to insufficient contrast.
Prioritize white or light grey for all text elements to ensure readability across this dark and vibrant palette.

Recommended combinations

Canopy Depths

Excellent for creating a sense of depth and mystery in web backgrounds or hero sections.

#003A3A · #004B49 · #009C9D

Vibrant Growth

Ideal for dynamic infographics or interactive elements, where #00C2C3 acts as a highlight.

#006D6F · #00C2C3 · #004B49

Emerald Flow

Use for clean, modern interfaces that require a fresh yet sophisticated feel.

#009C9D · #006D6F · #003A3A

CSS variables

:root {
  --tropical-rainforest-canopy-1: #004B49;
  --tropical-rainforest-canopy-2: #006D6F;
  --tropical-rainforest-canopy-3: #009C9D;
  --tropical-rainforest-canopy-4: #00C2C3;
  --tropical-rainforest-canopy-5: #003A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-rainforest-canopy": {
        1: "#004B49",
        2: "#006D6F",
        3: "#009C9D",
        4: "#00C2C3",
        5: "#003A3A",
      }
    }
  }
}

Hex values

Color 1#004B49

Color 2#006D6F

Color 3#009C9D

Color 4#00C2C3

Color 5#003A3A

Accessibility

Contrast checker

1.6:1Fail

3:1Fail

4.5:1AA

1.3:1Fail

1.6:1Fail

1.8:1Fail

2.8:1Fail

2.1:1Fail

3:1Fail

1.8:1Fail

1.5:1Fail

3.7:1AA18

4.5:1AA

2.8:1Fail

1.5:1Fail

5.7:1AA

1.3:1Fail

2.1:1Fail

3.7:1AA18

5.7:1AA

Similar palettes

More like Tropical Rainforest Canopy

View all vibrant

Rainforest Canopy Jewel

Rainforest Canopy Light

Vivid Jungle Canopy

Canopy Greenery

Dragonfly Wing Iridescence

Emerald Coastline