Back to palettes

Palette

Nocturne Woodland Shadow

Deep, moody grays and blacks capturing the eerie stillness and hidden depths of a forest at night.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nocturne Woodland Shadow 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 Nocturne Woodland Shadow.

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

Data visualization

#1A1A1A#333333#4F4F4F#757575#B0B0B0

Palette guide

How to use Nocturne Woodland Shadow

Overview

The Nocturne Woodland Shadow palette captures the eerie stillness and hidden depths of a forest at night with its deep, moody grays and blacks. Ranging from the profound #1A1A1A to the softer #B0B0B0, this palette offers a rich, atmospheric foundation for designs that require a sense of mystery and grounded elegance. Intermediate shades like #4F4F4F and #757575 provide versatile options for building visual hierarchy and texture, making it ideal for projects seeking a natural yet sophisticated dark aesthetic, from nature-themed interfaces to gothic branding.

Best used for

  • Nature-themed dark mode applications
  • Gothic or fantasy branding
  • Mysterious website aesthetics
  • Photography portfolios (shadows/moody)
  • Minimalist design with depth
  • Atmospheric game environments

Suggested color roles

primary

Utilize #1A1A1A as the deepest background, providing a profound, immersive dark canvas.

secondary

Employ #333333 for main content panels, cards, or secondary background sections.

accent

Reserve #B0B0B0 for key highlights, interactive elements, or crucial calls to action to ensure visibility.

background

The primary background should be #1A1A1A or #333333 for a consistent dark theme.

text

For primary text, use #B0B0B0 on dark backgrounds. #757575 can be used for secondary or less critical information.

Accessibility notes

  • Ensure #B0B0B0 text on #1A1A1A or #333333 backgrounds meets WCAG AA contrast standards.
  • Use #757575 for secondary text where contrast is sufficient, but prioritize #B0B0B0 for critical information.
  • Avoid using #4F4F4F as text on #333333 due to potential low contrast and readability issues.
  • Always test smaller text elements against their backgrounds for optimal legibility.

Recommended combinations

Forest Floor

Creates layered backgrounds, UI sections, and deep shadows reminiscent of a forest floor.

#1A1A1A · #333333 · #4F4F4F

Misty Path

Ideal for content cards, secondary text, and subtle gradients, suggesting a path through mist.

#333333 · #757575 · #B0B0B0

Moonlit Glint

Use for headers, call to action elements, and main text on a dark base, like a glint of moonlight.

#1A1A1A · #B0B0B0 · #757575

CSS variables

:root {
  --nocturne-woodland-shadow-1: #1A1A1A;
  --nocturne-woodland-shadow-2: #333333;
  --nocturne-woodland-shadow-3: #4F4F4F;
  --nocturne-woodland-shadow-4: #757575;
  --nocturne-woodland-shadow-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturne-woodland-shadow": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#4F4F4F",
        4: "#757575",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

dark forest color schememoody grey palettegothic web designshadow aesthetic colorsminimalist dark theme

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#4F4F4F
·
Color 4#757575
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.8:1AA18
8:1AAA
2
1.4:1Fail
1.5:1Fail
2.7:1Fail
5.8:1AA
3
2.1:1Fail
1.5:1Fail
1.8:1Fail
3.8:1AA18
4
3.8:1AA18
2.7:1Fail
1.8:1Fail
2.1:1Fail
5
8:1AAA
5.8:1AA
3.8:1AA18
2.1:1Fail

Similar palettes

More like Nocturne Woodland Shadow

View all dark
Ancient Forest Depths
Dark Forest Undergrowth
Dark Woodland Shade
Deep Forest Silence
Enchanted Forest Night
Enchanted Moon Forest