Palette

Emerald Jungle Mystery

A deep, rich collection of emerald greens, mimicking the vibrant, shadowed depths of a mysterious jungle.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Jungle Mystery 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 Emerald Jungle Mystery.

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

Data visualization

#0A2E2F#1C4D4D#2F7C7A#4BA09F#6ABDAE

Palette guide

How to use Emerald Jungle Mystery

Overview

The Emerald Jungle Mystery palette plunges into the vibrant, shadowed depths of a mysterious jungle, offering a rich collection of deep teal-greens. From the profound darkness of #0A2E2F and #1C4D4D, it transitions through the balanced #2F7C7A and the lively #4BA09F, culminating in the refreshing #6ABDAE. This palette is perfect for designs seeking to convey natural depth, exotic allure, and a sense of unexplored beauty. Ideal for eco-tourism, adventure brands, or any project that benefits from a sophisticated, earthy, and slightly mysterious aesthetic. The monochromatic progression provides excellent visual flow and depth, creating an immersive user experience.

Best used for

Eco-tourism and adventure travel
Documentary film branding (nature)
Exotic product packaging
Environmental education platforms
Luxury resort websites (tropical)
Outdoor apparel design

Suggested color roles

primary

Use #0A2E2F as the deepest, most stable color for main headers, branding, or dark mode.

secondary

Employ #1C4D4D as a supportive dark teal for subheadings, important text, or active states.

accent

Apply #4BA09F as a refreshing, subtle accent for interactive elements or gentle highlights.

background

Utilize #6ABDAE as a light, airy background for clean content areas, providing a calm and clear base.

text

Pair #0A2E2F with light backgrounds for strong contrast, or use white/light gray on darker backgrounds.

Accessibility notes

#6ABDAE may require darker text (e.g., #0A2E2F or black) to ensure readability against lighter backgrounds.
Pair #0A2E2F or #1C4D4D with white or off-white text for optimal legibility on dark backgrounds.
Avoid using #2F7C7A directly on #4BA09F for small text due to potential low contrast.
Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Deep Jungle

Creates a strong, immersive foundation for primary branding or elegant dark mode interfaces.

#0A2E2F · #1C4D4D · #2F7C7A

Misty Canopy

Ideal for clean, inviting layouts with light backgrounds and clear, readable text.

#6ABDAE · #4BA09F · #0A2E2F

Hidden Pathways

Suitable for interactive elements, progress indicators, or subtle informational displays.

#2F7C7A · #4BA09F · #1C4D4D

CSS variables

:root {
  --emerald-jungle-mystery-1: #0A2E2F;
  --emerald-jungle-mystery-2: #1C4D4D;
  --emerald-jungle-mystery-3: #2F7C7A;
  --emerald-jungle-mystery-4: #4BA09F;
  --emerald-jungle-mystery-5: #6ABDAE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-jungle-mystery": {
        1: "#0A2E2F",
        2: "#1C4D4D",
        3: "#2F7C7A",
        4: "#4BA09F",
        5: "#6ABDAE",
      }
    }
  }
}

Hex values

Color 1#0A2E2F

Color 2#1C4D4D

Color 3#2F7C7A

Color 4#4BA09F

Color 5#6ABDAE

Accessibility

Contrast checker

1.5:1Fail

3:1Fail

4.7:1AA

6.6:1AA

1.5:1Fail

1.9:1Fail

3.1:1AA18

4.3:1AA18