Palette

Midnight Forest Trail

Deep greens and shadowy tones capturing the mysterious allure of a forest path at night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Forest Trail 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 Forest Trail.

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

Data visualization

#0A0A0A#1E3D2A#2F4F4F#3CB371#6B8E23

Palette guide

How to use Midnight Forest Trail

Overview

The Midnight Forest Trail palette blends deep, shadowy tones with vibrant, energetic greens, capturing the mysterious allure of a forest path at night. Featuring #0A0A0A, #1E3D2A, #2F4F4F, #3CB371, and #6B8E23, this collection is dynamic and modern. It balances strong grounding darks with pops of natural vibrancy, making it ideal for designs that aim to be both immersive and lively. The contrast between the deep, almost black hues and the lively greens creates a compelling visual narrative, perfect for engaging users in an adventurous or nature-centric experience.

Best used for

Outdoor adventure and sports brands
Environmental and conservation websites
Modern gaming interfaces and themes
Tech startups with a natural focus
Dynamic digital art and illustrations
Event promotions with an energetic vibe

Suggested color roles

primary

Use #0A0A0A as a solid, grounding black for main backgrounds, navigation, or bold typography, providing a stark contrast.

secondary

Employ #2F4F4F for supporting panels, card backgrounds, or secondary headers, offering a deep blue-gray depth.

accent

Apply #3CB371 as a bright, energetic accent for calls-to-action, interactive elements, or key highlights, demanding attention.

background

Utilize #1E3D2A for immersive, deep forest-green backgrounds, creating a rich and inviting base.

text

For text on dark backgrounds, use white or a very light gray. On the lighter green accents, #0A0A0A or a dark charcoal provides excellent readability.

Accessibility notes

Ensure #3CB371 and #6B8E23 have sufficient contrast against #0A0A0A for text legibility.
White text on #0A0A0A, #1E3D2A, and #2F4F4F provides strong contrast.
Avoid using #6B8E23 for small text on dark backgrounds without sufficient contrast.
Use #3CB371 judiciously as an accent to avoid overwhelming the user with vibrancy.

Recommended combinations

Deep Path

Establishes a dark, foundational theme, perfect for creating depth and structure in layouts.

#0A0A0A · #1E3D2A · #2F4F4F

Trail Markers

Combines a dark base with vivid green accents, ideal for highlighting key information and interactive elements.

#0A0A0A · #3CB371 · #6B8E23

Lush Undergrowth

Focuses on the vibrant greens with a dark green support, great for nature-themed illustrations or sections.

#1E3D2A · #3CB371 · #6B8E23

CSS variables

:root {
  --midnight-forest-trail-2-1: #0A0A0A;
  --midnight-forest-trail-2-2: #1E3D2A;
  --midnight-forest-trail-2-3: #2F4F4F;
  --midnight-forest-trail-2-4: #3CB371;
  --midnight-forest-trail-2-5: #6B8E23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-forest-trail-2": {
        1: "#0A0A0A",
        2: "#1E3D2A",
        3: "#2F4F4F",
        4: "#3CB371",
        5: "#6B8E23",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#1E3D2A

Color 3#2F4F4F

Color 4#3CB371

Color 5#6B8E23

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

7.4:1AAA

5.2:1AA

1.7:1Fail

1.3:1Fail

4.5:1AA18

3.1:1AA18

2.2:1Fail

1.3:1Fail

3.3:1AA18

2.3:1Fail

7.4:1AAA

4.5:1AA18

3.3:1AA18

1.4:1Fail

5.2:1AA

3.1:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Midnight Forest Trail

Midnight Forest Shade

Murmur Wood Shadow