Palette

Midnight Fern Glow

The subtle shimmer of dewdrops on ferns in a moonlit forest, combining deep greens and blues with hidden glimmers.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Fern Glow 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 Fern Glow.

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

Data visualization

#2F4F4F#006400#4682B4#1E3A4D#6B8E23

Palette guide

How to use Midnight Fern Glow

Overview

The Midnight Fern Glow palette captures the subtle shimmer of dewdrops on ferns in a moonlit forest, blending deep greens and blues with hidden glimmers. It features the rich #2F4F4F, the classic #006400, and the intriguing #4682B4. Anchored by the profound #1E3A4D, and accented by the earthy #6B8E23, this collection offers a sophisticated and natural aesthetic. Designers can leverage these shades to create immersive digital environments, serene branding, or captivating user interfaces that convey tranquility, growth, and a touch of the mystical. Developers will find it excellent for nature-themed apps, sustainable lifestyle brands, or any project seeking a deep, elegant, and organically inspired feel.

Best used for

Nature photography websites
Eco-conscious brand identity
Forest-themed game interfaces
Wellness and mindfulness apps
Outdoor adventure gear marketing
Subtle dark mode UI with a natural touch

Suggested color roles

primary

Use #1E3A4D as the foundational background, establishing a deep, calming blue-green base reminiscent of a night forest.

secondary

Apply #2F4F4F for secondary panels or content blocks, offering subtle differentiation and reinforcing the natural theme.

accent

Reserve #6B8E23 for key interactive elements, calls-to-action, or important highlights to add a vibrant, earthy pop.

background

The deep #1E3A4D serves as an excellent primary background, creating a serene and mysterious canvas for content.

text

For optimal readability, use a lighter shade like #4682B4 or #006400, or a clean white, on the darker backgrounds.

Accessibility notes

Ensure high contrast for text, especially when using #4682B4 or #6B8E23 on #1E3A4D or #2F4F4F backgrounds, to meet WCAG AA.
Avoid using #2F4F4F for small text on #1E3A4D due to insufficient contrast; opt for a brighter color.
Interactive elements should clearly stand out using #6B8E23 against darker backgrounds to aid users with visual impairments.
For users with visual impairments, provide an option for very high-contrast text (e.g., pure white) against the darkest background.

Recommended combinations

Forest Floor

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

#1E3A4D · #2F4F4F · #6B8E23

Dewdrop Gradient

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

#2F4F4F · #4682B4 · #006400

Glow Accent

Perfect for UI components: #1E3A4D as a container, #006400 for secondary elements, and #6B8E23 for active states or icons.

#1E3A4D · #006400 · #6B8E23

CSS variables

:root {
  --midnight-fern-glow-1: #2F4F4F;
  --midnight-fern-glow-2: #006400;
  --midnight-fern-glow-3: #4682B4;
  --midnight-fern-glow-4: #1E3A4D;
  --midnight-fern-glow-5: #6B8E23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-fern-glow": {
        1: "#2F4F4F",
        2: "#006400",
        3: "#4682B4",
        4: "#1E3A4D",
        5: "#6B8E23",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#006400

Color 3#4682B4

Color 4#1E3A4D

Color 5#6B8E23

Accessibility

Contrast checker

1.2:1Fail

2.2:1Fail

1.3:1Fail

2.3:1Fail

1.2:1Fail

1.8:1Fail

1.6:1Fail

2:1Fail

2.2:1Fail

1.8:1Fail

2.9:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

2.9:1Fail

3.1:1AA18

2.3:1Fail

2:1Fail

1.1:1Fail

3.1:1AA18

Similar palettes

More like Midnight Fern Glow

View all dark

Shadowed Woods Twilight

Deep Forest Hush

Forest Canopy Seclusion

Midnight Forest Velvet

Ancient Forest Depths

Ancient Woodland Path