Palette

Midnight Emerald Depths

Mysterious and rich, reflecting the deep, dark greens of a hidden grotto under the veil of midnight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Emerald Depths 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 Midnight Emerald Depths.

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

Data visualization

#006400#2E8B57#008080#004D40#0A2E2A

Palette guide

How to use Midnight Emerald Depths

Overview

The Midnight Emerald Depths palette dives into a mysterious and rich world of deep greens and teals, evoking a hidden grotto under the veil of midnight. It features the classic #006400, the vibrant #2E8B57, and the intriguing #008080. Anchored by the profound #004D40 and the almost black #0A2E2A, this collection offers a sophisticated and natural aesthetic. Designers can leverage these shades to create immersive digital environments, luxurious branding, or captivating user interfaces that convey growth, tranquility, and a touch of the mystical. Developers will find it excellent for nature-themed apps, high-end lifestyle brands, or any project seeking a deep, elegant, and earthy yet vibrant feel.

Best used for

Luxury eco-friendly branding
Nature and wilderness conservation sites
High-end botanical product packaging
Dark mode themes with an organic feel
Fantasy game environments (forests/swamps)
Wellness apps focused on natural healing

Suggested color roles

primary

Use #0A2E2A as the foundational background, establishing a profound, almost black-green base for an immersive feel.

secondary

Apply #004D40 for secondary panels or content blocks, providing a subtle differentiation and reinforcing the deep green theme.

accent

Reserve #006400 or #2E8B57 for key interactive elements, calls-to-action, or important highlights to add a vibrant, lush pop.

background

The deep #0A2E2A serves as an excellent primary background, creating a mysterious and luxurious canvas for content.

text

For optimal readability, use a lighter green like #2E8B57 or #006400, or a clean white, on the darker backgrounds.

Accessibility notes

Ensure sufficient contrast for text against #0A2E2A or #004D40 backgrounds, aiming for WCAG AA compliance with lighter greens or white.
Avoid using #008080 for small text on #2E8B57, as the contrast ratio might be insufficient for readability.
Interactive elements should use a clearly contrasting color like #006400 on darker backgrounds to ensure visibility.
For users with visual impairments, provide an option for high-contrast text (e.g., pure white) against the darkest background.

Recommended combinations

Grotto Base

Ideal for main layouts, using the deepest shades for structure and #2E8B57 for prominent headings or navigation.

#0A2E2A · #004D40 · #2E8B57

Lush Gradient

Great for subtle background gradients or section dividers, creating a smooth, organic transition.

#004D40 · #008080 · #2E8B57

Emerald Focus

Perfect for UI components: #0A2E2A as a container, #006400 for secondary elements, and #2E8B57 for active states or icons.

#0A2E2A · #006400 · #2E8B57

CSS variables

:root {
  --midnight-emerald-depths-1: #006400;
  --midnight-emerald-depths-2: #2E8B57;
  --midnight-emerald-depths-3: #008080;
  --midnight-emerald-depths-4: #004D40;
  --midnight-emerald-depths-5: #0A2E2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-emerald-depths": {
        1: "#006400",
        2: "#2E8B57",
        3: "#008080",
        4: "#004D40",
        5: "#0A2E2A",
      }
    }
  }
}

Hex values

Color 1#006400

Color 2#2E8B57

Color 3#008080

Color 4#004D40

Color 5#0A2E2A

Accessibility

Contrast checker

1.8:1Fail

1.6:1Fail

1.3:1Fail

2:1Fail

1.8:1Fail

1.1:1Fail

2.3:1Fail

3.4:1AA18

1.6:1Fail

1.1:1Fail

2.1:1Fail

3.1:1AA18

1.3:1Fail

2.3:1Fail

2.1:1Fail

1.5:1Fail

2:1Fail

3.4:1AA18

3.1:1AA18

1.5:1Fail

Similar palettes

More like Midnight Emerald Depths

View all dark

Deep Forest Enchant

Midnight City Glitch

Midnight Forest Shade

Midnight Forest Trail

Midnight Horizon Gaze

Midnight Ink Quill