Palette

Tropical Rainforest Mist

Vibrant, verdant greens and deep, humid blues evoke the dense, mysterious atmosphere of a misty rainforest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E8B57#3CB371#48D1CC#2F4F4F#A0A9A2

Palette guide

How to use Tropical Rainforest Mist

Overview

The Tropical Rainforest Mist palette evokes the dense, mysterious atmosphere of a misty rainforest, combining vibrant, verdant greens with deep, humid blues. This collection features a rich forest green #2E8B57, a lively medium sea green #3CB371, a refreshing turquoise #48D1CC, a deep charcoal #2F4F4F, and a soft, muted grey #A0A9A2. Designers can leverage these hues for projects that require a natural, calming yet sophisticated aesthetic, such as wellness apps, environmental branding, or serene digital landscapes. Developers will find these hex codes ideal for creating immersive and tranquil user experiences that convey depth and natural beauty.

Best used for

Meditation and mindfulness apps
Eco-conscious product branding
Nature photography websites
Spa and relaxation services
Sustainable architecture firms
Environmental awareness campaigns

Suggested color roles

primary

Use #2F4F4F as a sophisticated primary color for backgrounds or main content areas, providing depth.

secondary

Employ #2E8B57 for subheadings or important sections, adding a lush, natural feel.

accent

Introduce #48D1CC for subtle highlights, icons, or interactive elements, providing a refreshing contrast.

background

Apply #A0A9A2 as a light, misty background for content areas, creating a soft and airy canvas.

text

For body text, a dark grey like #333333 offers excellent readability against #A0A9A2; white text on #2F4F4F.

Accessibility notes

Ensure sufficient contrast between #48D1CC and #A0A9A2 when used for text or small elements.
Verify readability of black text on #A0A9A2 and #48D1CC.
Avoid using #3CB371 text on #2E8B57 background due to low contrast.
Prioritize dark, high-contrast text on lighter backgrounds and white text on darker backgrounds for optimal legibility.

Recommended combinations

Misty Depths

Excellent for creating a sense of depth and tranquility in website headers or large sections.

#2F4F4F · #2E8B57 · #A0A9A2

Rainforest Glow

Ideal for highlighting interactive elements or data visualization, with #48D1CC as a vibrant pop.

#3CB371 · #48D1CC · #2F4F4F

Serene Canopy

Use for clean, minimalist interfaces or branding, where #A0A9A2 provides a calming base.

#A0A9A2 · #2E8B57 · #48D1CC

CSS variables

:root {
  --tropical-rainforest-mist-1: #2E8B57;
  --tropical-rainforest-mist-2: #3CB371;
  --tropical-rainforest-mist-3: #48D1CC;
  --tropical-rainforest-mist-4: #2F4F4F;
  --tropical-rainforest-mist-5: #A0A9A2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-rainforest-mist": {
        1: "#2E8B57",
        2: "#3CB371",
        3: "#48D1CC",
        4: "#2F4F4F",
        5: "#A0A9A2",
      }
    }
  }
}

Hex values

Color 1#2E8B57

Color 2#3CB371

Color 3#48D1CC

Color 4#2F4F4F

Color 5#A0A9A2

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

2.1:1Fail

1.8:1Fail

1.6:1Fail

1.4:1Fail

3.3:1AA18

1.1:1Fail

2.3:1Fail

1.4:1Fail

4.8:1AA

1.3:1Fail

2.1:1Fail

3.3:1AA18

4.8:1AA

3.7:1AA18

1.8:1Fail

1.1:1Fail

1.3:1Fail

3.7:1AA18

Similar palettes

More like Tropical Rainforest Mist

View all earth

Canopy Emerald Burst

Monsoon Rainforest Mist

Emerald Canopy Shroud

Emerald Rainforest Mist

Jungle Canopy

Lush Rainforest Floor