Back to palettes

Palette

Nocturnal Grove Hues

Shifting shades of deep green and muted earth, capturing the mysterious and quiet allure 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 Nocturnal Grove Hues 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 Grove Hues.

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

Data visualization

#002117#00402E#006044#36454F#5C4033

Palette guide

How to use Nocturnal Grove Hues

Overview

The Nocturnal Grove Hues palette evokes the quiet, mysterious allure of a forest at night, featuring a unique blend of deep greens and muted earthy tones. This sophisticated collection begins with the profound #002117, a near-black forest green, progressing through the rich #00402E and the slightly brighter #006044. Complementing these verdant shades are the charcoal-like #36454F and a warm, deep brown #5C4033. Designers can utilize this palette to craft natural, grounding, and subtly mysterious interfaces, perfect for eco-conscious brands, nature-themed projects, or any design seeking an organic yet refined dark aesthetic.

Best used for

  • Eco-friendly product branding
  • Nature conservation websites
  • Outdoor adventure gear design
  • Organic food packaging
  • Dark mode interfaces with an earthy feel
  • Meditation or wellness apps

Suggested color roles

primary

Ideal for dominant backgrounds, large sections, or elements requiring significant depth and grounding, use #002117.

secondary

Apply #00402E for sub-headers, navigation, or content panels that need to stand out from the primary without being too bright.

accent

Use #006044, a vibrant yet deep green, for call-to-action buttons, interactive elements, or key highlights to draw attention.

background

Functions well as a secondary background color or for content blocks, offering a cool, muted contrast, use #36454F.

text

Excellent for text on lighter backgrounds within the palette, or as a contrasting accent text color on dark greens, use #5C4033. For light text, a near-white would be suitable.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #5C4033 on other dark tones within the palette.
  • #006044 can be a good choice for interactive elements against darker backgrounds, but check its contrast with #002117 or #00402E.
  • Avoid using #5C4033 for small text on #36454F as contrast might be low and impact readability.
  • For optimal readability, consider using a very light gray or white text on the darkest colors like #002117.

Recommended combinations

Forest Depths

Dramatic background with a vibrant green accent and earthy text for natural themes and strong visual hierarchy.

#002117 · #006044 · #5C4033

Earthy Shadow

Muted, sophisticated combination for content sections or subtle branding, creating a harmonious, grounded feel.

#36454F · #00402E · #5C4033

Grove Highlight

Deep background with a warm brown secondary and a striking green accent for key features and visual interest.

#002117 · #5C4033 · #006044

CSS variables

:root {
  --nocturnal-grove-hues-1: #002117;
  --nocturnal-grove-hues-2: #00402E;
  --nocturnal-grove-hues-3: #006044;
  --nocturnal-grove-hues-4: #36454F;
  --nocturnal-grove-hues-5: #5C4033;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturnal-grove-hues": {
        1: "#002117",
        2: "#00402E",
        3: "#006044",
        4: "#36454F",
        5: "#5C4033",
      }
    }
  }
}

Related searches

dark forest green palettemysterious woodland colorsearthy dark mode themeorganic nature color schemedeep green brown palette

Palette colors

Hex values

Color 1#002117
·
Color 2#00402E
·
Color 3#006044
·
Color 4#36454F
·
Color 5#5C4033
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
1.7:1Fail
1.8:1Fail
2
1.4:1Fail
1.6:1Fail
1.2:1Fail
1.3:1Fail
3
2.2:1Fail
1.6:1Fail
1.3:1Fail
1.2:1Fail
4
1.7:1Fail
1.2:1Fail
1.3:1Fail
1.1:1Fail
5
1.8:1Fail
1.3:1Fail
1.2:1Fail
1.1:1Fail

Similar palettes

More like Nocturnal Grove Hues

View all dark