Back to palettes

Palette

Tropical Canopy Vista

A lush gradient of greens reflecting the rich, dense foliage of a thriving tropical rainforest canopy.

vibrantnatural5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#006400#228B22#3CB371#6B8E23#8FBC8F

Palette guide

How to use Tropical Canopy Vista

Overview

The Tropical Canopy Vista palette captures the lush, thriving essence of a rainforest with its vibrant gradient of greens. Featuring a deep forest green #006400, a lively emerald #3CB371, and the soft, expansive #8FBC8F, this collection is perfect for projects that aim to evoke growth, vitality, and natural beauty. Designers and developers can leverage these colors to create immersive digital environments, compelling branding, or engaging content that celebrates the richness of the natural world. The varied greens offer depth and versatility, allowing for both bold statements and subtle, harmonious transitions across designs.

Best used for

  • Nature documentary branding
  • Outdoor adventure apparel websites
  • Health and wellness app interfaces
  • Botanical garden promotional materials
  • Eco-tourism marketing campaigns
  • Children's educational nature books

Suggested color roles

primary

Utilize #006400 as a strong, grounding primary color for headings, navigation, or key brand elements, signifying depth and stability.

secondary

Apply #228B22 for supportive elements like subheadings, secondary buttons, or data visualizations, adding vibrant energy.

accent

Use #3CB371 as a refreshing and bright accent for call-to-action buttons, interactive elements, or graphic highlights.

background

Employ #8FBC8F for a light, airy background that complements the darker greens, or #6B8E23 for a more earthy, textured base.

text

For clear readability, use #006400 for main body text on lighter backgrounds such as #8FBC8F. A dark charcoal or black is also suitable for general text.

Accessibility notes

  • Pairing #006400 with #8FBC8F offers excellent contrast for text, ensuring readability.
  • Be cautious when using #6B8E23 as text on #8FBC8F, as the contrast might be borderline for smaller font sizes.
  • Ensure sufficient contrast for interactive UI elements when using adjacent shades like #228B22 and #3CB371.
  • Always prioritize a darker shade like #006400 for critical information on lighter backgrounds to meet accessibility standards.

Recommended combinations

Forest Depths

A balanced scheme with a deep base, light background, and a vibrant accent for key elements.

#006400 · #8FBC8F · #3CB371

Lush Gradient

Creates a natural, evolving green gradient, with the darkest shade reserved for impactful text.

#228B22 · #6B8E23 · #006400

Vista Highlights

A fresh and inviting combination, using a bright accent on a soft base with a supportive mid-tone.

#3CB371 · #8FBC8F · #228B22

CSS variables

:root {
  --tropical-canopy-vista-1: #006400;
  --tropical-canopy-vista-2: #228B22;
  --tropical-canopy-vista-3: #3CB371;
  --tropical-canopy-vista-4: #6B8E23;
  --tropical-canopy-vista-5: #8FBC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-canopy-vista": {
        1: "#006400",
        2: "#228B22",
        3: "#3CB371",
        4: "#6B8E23",
        5: "#8FBC8F",
      }
    }
  }
}

Related searches

vibrant green color schemesjungle inspired palettelush nature colorseco brand identityforest green web design

Palette colors

Hex values

Color 1#006400
·
Color 2#228B22
·
Color 3#3CB371
·
Color 4#6B8E23
·
Color 5#8FBC8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
2:1Fail
3.5:1AA18
2
1.7:1Fail
1.6:1Fail
1.2:1Fail
2:1Fail
3
2.8:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail
4
2:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
5
3.5:1AA18
2:1Fail
1.2:1Fail
1.8:1Fail

Similar palettes

More like Tropical Canopy Vista

View all vibrant
Rainforest Emerald Glade
Emerald Canopy Glade
Emerald Glade Lush
Jungle Dewdrop Shine
Lush Tropical Haven
Verdant Canopy Glade