Palette

Verdant Nocturne Spell

A mysterious journey into a deep forest as night falls, where ancient magic stirs amongst the trees.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Nocturne Spell 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 Verdant Nocturne Spell.

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

Data visualization

#1A2E2C#3F5E52#7D9B85#B0C4A4#0F1A1B

Palette guide

How to use Verdant Nocturne Spell

Overview

The Verdant Nocturne Spell palette invites users into a mysterious, deep forest as night falls, where ancient magic stirs. This collection is rich with deep, enigmatic greens and almost-black shades, creating a sophisticated and ethereal atmosphere. Key colors include the profound #0F1A1B and #1A2E2C, providing a powerful, dark foundation. Lighter, misty greens like #3F5E52, #7D9B85, and #B0C4A4 emerge like subtle glows, offering contrast and depth. This palette is ideal for designers looking to craft experiences that are dark, luxurious, mystical, or have a touch of gothic elegance, perfect for high-end digital interfaces or evocative branding.

Best used for

Luxury brand websites
Dark mode UI designs
Mystical or fantasy-themed games
High-end cosmetic packaging
Elegant event invitations
Nightlife or entertainment branding

Suggested color roles

primary

#0F1A1B or #1A2E2C should be used as the dominant, deep primary for backgrounds or major sections, setting a mysterious tone.

secondary

#3F5E52 provides a rich, dark green for secondary panels, large text blocks, or subtle interactive elements, adding depth.

accent

#7D9B85 or #B0C4A4 can serve as striking accents for calls-to-action, icons, or important highlights, creating a mystical glow.

background

#0F1A1B or #1A2E2C are ideal for dark mode backgrounds, providing a deep, immersive canvas for lighter elements.

text

For optimal readability, use a crisp white or very light gray text on the dark backgrounds. #B0C4A4 works well for secondary text on #0F1A1B.

Accessibility notes

Ensure sufficient contrast for light text (e.g., white) on the dark backgrounds #0F1A1B and #1A2E2C.
#B0C4A4 provides excellent contrast on #0F1A1B for body text.
Avoid using #7D9B85 on #3F5E52 for small text; contrast may be too low for accessibility.
The lightest color, #B0C4A4, works best as text or icon color on the darkest shades for maximum legibility.

Recommended combinations

Deep Forest Night

Perfect for dark mode interfaces, with deep backgrounds and luminous accent text.

#0F1A1B · #3F5E52 · #B0C4A4

Enchanted Mist

Creates a layered, mysterious look for section headers or atmospheric graphics.

#1A2E2C · #7D9B85 · #3F5E52

Twilight Glow

Highlights important information against a dark backdrop, offering clear readability.

#B0C4A4 · #7D9B85 · #0F1A1B

CSS variables

:root {
  --verdant-nocturne-spell-1: #1A2E2C;
  --verdant-nocturne-spell-2: #3F5E52;
  --verdant-nocturne-spell-3: #7D9B85;
  --verdant-nocturne-spell-4: #B0C4A4;
  --verdant-nocturne-spell-5: #0F1A1B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-nocturne-spell": {
        1: "#1A2E2C",
        2: "#3F5E52",
        3: "#7D9B85",
        4: "#B0C4A4",
        5: "#0F1A1B",
      }
    }
  }
}

Hex values

Color 1#1A2E2C

Color 2#3F5E52

Color 3#7D9B85

Color 4#B0C4A4

Color 5#0F1A1B

Accessibility

Contrast checker

2:1Fail

4.7:1AA

7.7:1AAA

1.2:1Fail

2:1Fail

2.4:1Fail

3.8:1AA18

2.5:1Fail

4.7:1AA

2.4:1Fail

1.6:1Fail

5.8:1AA

7.7:1AAA

3.8:1AA18

1.6:1Fail

9.5:1AAA

1.2:1Fail

2.5:1Fail

5.8:1AA

9.5:1AAA

Similar palettes

More like Verdant Nocturne Spell

View all dark

Dark Mystical Forest

Nocturnal Woodland Shade

Shadowed Grove Depths

Ancient Forest Depths

Celestial Twilight Garden

Dark Forest Cloak