Palette

Lush Tropical Haven

A vibrant fusion of deep greens and sunny accents, like a flourishing jungle paradise.

vibrantnatural5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lush Tropical Haven 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 Lush Tropical Haven.

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

Data visualization

#228B22#3CB371#9ACD32#FFD700#008080

Palette guide

How to use Lush Tropical Haven

Overview

The Lush Tropical Haven palette is a vibrant fusion of deep greens, sunny yellow, and cool teal, evoking the lushness of a flourishing jungle paradise. It features the rich #228B22 (Forest Green) and the refreshing #3CB371 (Medium Sea Green), balanced by the energetic #9ACD32 (Yellow Green). The unexpected #FFD700 (Gold) adds a sun-drenched accent, while #008080 (Teal) introduces a serene, watery depth. This palette is ideal for designers and developers aiming to create lively, exotic, and inviting experiences, perfect for travel, hospitality, or nature-inspired digital and print media.

Best used for

Travel and tourism branding
Tropical resort and spa websites
Summer and holiday marketing campaigns
Exotic food and beverage packaging
Nature documentary graphics
Vibrant event invitations

Suggested color roles

primary

Use #228B22 as the dominant color for backgrounds or main content areas to establish a deep, natural foundation.

secondary

Employ #3CB371 for supporting elements, subheadings, or secondary navigation, providing a lush mid-tone.

accent

Introduce #FFD700 for striking calls-to-action, key highlights, or decorative elements to infuse warmth and energy. #008080 can serve as a cool, sophisticated accent.

background

A very light neutral or white background can make the vibrant colors pop. #9ACD32 could be used sparingly for specific sections.

text

Dark charcoal or black is recommended for body text. For headings, #228B22 or #008080 provide excellent contrast and maintain the tropical theme.

Accessibility notes

Ensure high contrast for text, especially when using #FFD700 as a background or text color, as it is a bright hue.
The #9ACD32 may not provide enough contrast for small text on lighter backgrounds; use it for larger elements.
Verify that #008080 provides sufficient contrast against adjacent green shades for readability.
Always test color combinations for WCAG AA compliance, particularly for interactive elements and critical information.

Recommended combinations

Jungle Canopy

Creates a deep, immersive tropical feel, suitable for backgrounds or main visual themes.

#228B22 · #3CB371 · #008080

Sunny Oasis

Perfect for highlighting energetic elements or conveying warmth and light in a design.

#FFD700 · #9ACD32 · #3CB371

Vibrant Contrast

Offers a dynamic and sophisticated look, great for calls-to-action or distinct sections.

#008080 · #228B22 · #FFD700

CSS variables

:root {
  --lush-tropical-haven-1: #228B22;
  --lush-tropical-haven-2: #3CB371;
  --lush-tropical-haven-3: #9ACD32;
  --lush-tropical-haven-4: #FFD700;
  --lush-tropical-haven-5: #008080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lush-tropical-haven": {
        1: "#228B22",
        2: "#3CB371",
        3: "#9ACD32",
        4: "#FFD700",
        5: "#008080",
      }
    }
  }
}

Hex values

Color 1#228B22

Color 2#3CB371

Color 3#9ACD32

Color 4#FFD700

Color 5#008080

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

3.1:1AA18

1.1:1Fail

1.6:1Fail

1.4:1Fail

1.9:1Fail

1.8:1Fail

2.3:1Fail

1.4:1Fail

1.3:1Fail

2.5:1Fail

3.1:1AA18

1.9:1Fail

1.3:1Fail

3.4:1AA18

1.1:1Fail

1.8:1Fail

2.5:1Fail

3.4:1AA18

Similar palettes

More like Lush Tropical Haven

View all vibrant

Jungle Dewdrop Shine

Rainforest Canopy Light

Rainforest Emerald Glade

Tropical Canopy Vista

Arid Cactus Blossom

Emerald Canopy Glade