Back to palettes

Palette

Midnight Forest Canopy

The shadowy depths of an ancient forest under a moonless, star-dusted sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A2A2A#2E3A3A#0D1A1A#3F4F4F#050C0C

Palette guide

How to use Midnight Forest Canopy

Overview

The Midnight Forest Canopy palette immerses users in profound darkness, capturing the mysterious depths of an ancient forest under a moonless sky. Comprising ultra-dark shades like #1A2A2A, #2E3A3A, #0D1A1A, #3F4F4F, and #050C0C, this collection is designed for sophisticated dark themes where subtle variations create immense depth. It's a challenging yet rewarding palette for designers aiming for a truly immersive and atmospheric experience. The slight shifts in tone prevent the design from feeling flat, instead evoking the dense, shadowy layers of a nocturnal canopy.

Best used for

  • Premium dark mode UI designs
  • Luxury brand websites and apps
  • Gaming interfaces and dashboards
  • Artistic and photography portfolios
  • Atmospheric event promotions
  • Abstract digital art installations

Suggested color roles

primary

Designate #0D1A1A as the deepest foundational black-green for main backgrounds or large structural elements, providing profound depth.

secondary

Use #1A2A2A for supporting panels, card backgrounds, or subtle divisions, offering a slight visual lift from the primary dark.

accent

Apply #3F4F4F as a very subdued accent for borders, subtle icons, or hover states, adding minimal contrast.

background

The ultimate dark base, #050C0C, is ideal for immersive full-screen backgrounds where the deepest void is desired.

text

For optimal readability on these deep tones, use pure white or a very light gray. For extremely subtle text, #3F4F4F can be used on a lighter shade like #2E3A3A.

Accessibility notes

  • Contrast is inherently low; always use white or very light gray for text on any of these dark colors.
  • Avoid using any of the palette's colors for text on each other, as contrast ratios will be insufficient.
  • Employ larger font sizes and generous line spacing to improve readability on dark backgrounds.
  • Ensure interactive elements are clearly distinguished, possibly with very subtle glows or a stark white outline.

Recommended combinations

Abyssal Depths

Creates an ultra-dark, foundational base, perfect for immersive full-screen experiences.

#050C0C · #0D1A1A · #1A2A2A

Canopy Layers

Highlights subtle shifts in darkness, ideal for layering UI elements with minimal visual distinction.

#1A2A2A · #2E3A3A · #3F4F4F

Shadow Play

Blends the deepest tones with a hint of gray-green for atmospheric backgrounds and textures.

#0D1A1A · #3F4F4F · #050C0C

CSS variables

:root {
  --midnight-forest-canopy-1: #1A2A2A;
  --midnight-forest-canopy-2: #2E3A3A;
  --midnight-forest-canopy-3: #0D1A1A;
  --midnight-forest-canopy-4: #3F4F4F;
  --midnight-forest-canopy-5: #050C0C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-forest-canopy": {
        1: "#1A2A2A",
        2: "#2E3A3A",
        3: "#0D1A1A",
        4: "#3F4F4F",
        5: "#050C0C",
      }
    }
  }
}

Related searches

ultra dark color schememysterious black greendeep forest palettedark mode aesthetic colorssubtle dark design

Palette colors

Hex values

Color 1#1A2A2A
·
Color 2#2E3A3A
·
Color 3#0D1A1A
·
Color 4#3F4F4F
·
Color 5#050C0C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.2:1Fail
1.7:1Fail
1.3:1Fail
2
1.3:1Fail
1.5:1Fail
1.4:1Fail
1.7:1Fail
3
1.2:1Fail
1.5:1Fail
2.1:1Fail
1.1:1Fail
4
1.7:1Fail
1.4:1Fail
2.1:1Fail
2.3:1Fail
5
1.3:1Fail
1.7:1Fail
1.1:1Fail
2.3:1Fail

Similar palettes

More like Midnight Forest Canopy

View all dark