Back to palettes

Palette

Nocturne Shadow Play

Explores the dramatic interplay of shadows and muted light under a moonless night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B1E2B#333647#575F78#878C9B#0F0F0F

Palette guide

How to use Nocturne Shadow Play

Overview

The Nocturne Shadow Play palette dives into a realm of deep mystery and drama, exploring the interplay of shadows and muted light under a moonless night sky. Dominated by rich, dark blue-greys like #1B1E2B and #333647, it offers a sophisticated backdrop for designs that require depth and intrigue. The near-black #0F0F0F grounds the palette, while the lighter #878C9B provides a crucial point of contrast, making it highly effective for cinematic themes, luxury brands, and immersive digital experiences that aim for a dramatic, yet refined, aesthetic.

Best used for

  • Cinematic website headers
  • Luxury app interfaces
  • Gaming UI design
  • Evening event branding
  • Abstract art showcases
  • Sophisticated presentation backgrounds

Suggested color roles

primary

Establish a deep, mysterious base with #0F0F0F for primary backgrounds or large hero sections.

secondary

Use #1B1E2B for main content areas, panels, or as a slightly lighter background layer.

accent

Apply #878C9B for critical calls to action, active states, or subtle highlights to draw attention.

background

For a truly dark and immersive canvas, #1B1E2B serves as an excellent primary background color.

text

The lightest shade, #878C9B, is ideal for primary text on darker backgrounds. For less critical information, a slightly darker charcoal could be used.

Accessibility notes

  • Ensure #878C9B provides sufficient contrast against #1B1E2B and #333647 for all text elements.
  • Avoid using #333647 or #575F78 as text on darker backgrounds without careful contrast verification.
  • Prioritize #878C9B for all essential text and interactive elements to maintain readability.
  • Consider a pure white text on #0F0F0F for maximum readability in high-impact areas.

Recommended combinations

Deep Mystery

Creates a profound depth for backgrounds, layered sections, or subtle gradients.

#0F0F0F · #1B1E2B · #333647

Subtle Contrast

Excellent for content cards, secondary information, and soft visual distinctions.

#1B1E2B · #575F78 · #878C9B

Dramatic Highlight

Use for prominent headings, calls to action, and primary text on a dark base.

#0F0F0F · #878C9B · #333647

CSS variables

:root {
  --nocturne-shadow-play-1: #1B1E2B;
  --nocturne-shadow-play-2: #333647;
  --nocturne-shadow-play-3: #575F78;
  --nocturne-shadow-play-4: #878C9B;
  --nocturne-shadow-play-5: #0F0F0F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturne-shadow-play": {
        1: "#1B1E2B",
        2: "#333647",
        3: "#575F78",
        4: "#878C9B",
        5: "#0F0F0F",
      }
    }
  }
}

Related searches

dark blue grey color palettemysterious color schemedramatic web design colorsdeep night colorscinematic UI palette

Palette colors

Hex values

Color 1#1B1E2B
·
Color 2#333647
·
Color 3#575F78
·
Color 4#878C9B
·
Color 5#0F0F0F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.6:1Fail
4.9:1AA
1.2:1Fail
2
1.4:1Fail
1.9:1Fail
3.6:1AA18
1.6:1Fail
3
2.6:1Fail
1.9:1Fail
1.9:1Fail
3:1AA18
4
4.9:1AA
3.6:1AA18
1.9:1Fail
5.7:1AA
5
1.2:1Fail
1.6:1Fail
3:1AA18
5.7:1AA

Similar palettes

More like Nocturne Shadow Play

View all dark
Abyssal Trench Mystery
Bioluminescent Deep Trench
Cosmic Abyss Echo
Dark Forest Undergrowth
Dark Sea Onyx
Deep Ocean Abyssal