Back to palettes

Palette

Nocturnal Woodland Shade

Evokes the quiet, profound darkness and cool tranquility of a dense forest at night, deep and mysterious.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nocturnal Woodland Shade 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 Nocturnal Woodland Shade.

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

Data visualization

#1F2D21#3A4B3A#5A6F5C#8B8983#A28B78

Palette guide

How to use Nocturnal Woodland Shade

Overview

The Nocturnal Woodland Shade palette evokes the quiet, profound darkness and cool tranquility of a dense forest at night. This deeply grounding collection features a range of muted greens and earthy grays, starting with the almost black forest green #1F2D21. It transitions through the subtle #3A4B3A and the softer #5A6F5C, reflecting dappled moonlight. Complementing these are the cool, stone-like #8B8983 and a warm, inviting #A28B78. Designers can use this palette to create natural, serene, and sophisticated interfaces, perfect for outdoor brands, wellness apps, or any project seeking an organic, calming, and subtly mysterious dark aesthetic.

Best used for

  • Outdoor and adventure brands
  • Wellness and mindfulness applications
  • Sustainable and eco-conscious businesses
  • Nature photography websites
  • Rustic or organic product design
  • Dark mode themes with an earthy feel

Suggested color roles

primary

Use #1F2D21 as the deepest, most grounding color, ideal for dominant backgrounds, headers, or foundational elements.

secondary

Apply #3A4B3A as a rich, muted green perfect for navigation, card backgrounds, or sections requiring strong visual weight.

accent

Utilize #A28B78, a warm, earthy brown that provides a subtle yet inviting accent, great for call-to-action buttons or highlights.

background

Employ #8B8983, a cool, neutral gray that can serve as a clean background for content or as a contrasting element.

text

Choose #5A6F5C as a softer green-gray, suitable for secondary text on lighter backgrounds or as an accent text color. For primary text on dark backgrounds, consider white or a very light gray.

Accessibility notes

  • Ensure #8B8983 or #A28B78 text on #1F2D21 or #3A4B3A backgrounds meets contrast standards for readability.
  • #5A6F5C may lack sufficient contrast for small text on #8B8983; use for larger text or decorative elements.
  • Avoid using #A28B78 as text on #8B8983 for critical information due to potentially low contrast.
  • Always check WCAG guidelines for text and interactive element contrast, especially for body text.

Recommended combinations

Forest Floor

Deep background with a warm accent and a cool secondary for a natural, grounded feel and subtle contrast.

#1F2D21 · #A28B78 · #8B8983

Shaded Path

Harmonious blend of greens and gray for content areas, offering depth and serenity in a cohesive design.

#3A4B3A · #5A6F5C · #8B8983

Woodland Light

Strong base with a light background and a warm accent, ideal for clear hierarchy and visual interest.

#1F2D21 · #8B8983 · #A28B78

CSS variables

:root {
  --nocturnal-woodland-shade-1: #1F2D21;
  --nocturnal-woodland-shade-2: #3A4B3A;
  --nocturnal-woodland-shade-3: #5A6F5C;
  --nocturnal-woodland-shade-4: #8B8983;
  --nocturnal-woodland-shade-5: #A28B78;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturnal-woodland-shade": {
        1: "#1F2D21",
        2: "#3A4B3A",
        3: "#5A6F5C",
        4: "#8B8983",
        5: "#A28B78",
      }
    }
  }
}

Related searches

dark forest green brownmysterious woodland paletteearthy dark mode colorstranquil nature color schememuted green gray palette

Palette colors

Hex values

Color 1#1F2D21
·
Color 2#3A4B3A
·
Color 3#5A6F5C
·
Color 4#8B8983
·
Color 5#A28B78
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.7:1Fail
4.1:1AA18
4.5:1AA18
2
1.5:1Fail
1.7:1Fail
2.7:1Fail
2.9:1Fail
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
1.7:1Fail
4
4.1:1AA18
2.7:1Fail
1.6:1Fail
1.1:1Fail
5
4.5:1AA18
2.9:1Fail
1.7:1Fail
1.1:1Fail

Similar palettes

More like Nocturnal Woodland Shade

View all dark
Ancient Forest Depths
Dark Forest Cloak
Dark Forest Glade
Deep Forest Twilight
Enchanted Forest Night
Lunar Petals