Palette

Noir Detective Mood

A deep, brooding palette of blacks, greys, and muted blues, setting a dramatic and mysterious tone.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Noir Detective Mood 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 Noir Detective Mood.

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

Data visualization

#000000#2F4F4F#696969#4682B4#808080

Palette guide

How to use Noir Detective Mood

Overview

This "Noir Detective Mood" palette plunges designs into a world of mystery and sophistication, perfect for evoking a dramatic atmosphere. Anchored by deep black (#000000) and dark slate gray (#2F4F4F), it creates a strong, somber foundation. Muted mid-tones like dim gray (#696969) and gray (#808080) add depth and texture, preventing the scheme from becoming too flat. The inclusion of a steel blue (#4682B4) acts as a subtle, intriguing highlight, reminiscent of a rain-slicked street or a distant neon sign. Designers can leverage this palette for projects requiring a sense of intrigue, classic elegance, or a touch of urban grit. Developers will find these hex codes straightforward for implementing dark themes or stylized interfaces.

Best used for

Mystery novel covers or website themes
Dark mode UI for sophisticated apps
Cinematic title sequences or game environments
Branding for upscale bars or speakeasies
Photography portfolios with a dramatic flair
Themed event invitations

Suggested color roles

primary

Deep, foundational black (#000000) for dominant backgrounds or strong visual anchors.

secondary

Dark Slate Gray (#2F4F4F), excellent for secondary panels, navigation, or subtle content dividers.

accent

Steel Blue (#4682B4), use sparingly for interactive elements, highlights, or to add a hint of intrigue against the dark backdrop.

background

Use deep black (#000000) for ultimate drama, or dark slate gray (#2F4F4F) for a slightly softer, yet still moody, base.

text

For light text, use a very light gray like #AAAAAA or white for maximum contrast on #000000. For darker backgrounds like #2F4F4F, #696969 can work for subtle secondary text.

Accessibility notes

Ensure sufficient contrast when pairing light text with #000000 or #2F4F4F; white or very light gray is recommended.
Avoid using #696969 or #808080 for body text on dark backgrounds, as contrast may be insufficient.
#4682B4 against #000000 might not pass AA for small text; check contrast ratios carefully.
Use larger font sizes or bolding when using lower contrast color combinations for readability.

Recommended combinations

Urban Night

High-contrast pairing for headlines or call-to-action buttons, evoking city lights.

#000000 · #4682B4 · #696969

Shadow Play

Subtle depth for background elements, text, and dividers in a sophisticated layout.

#2F4F4F · #808080 · #000000

Subtle Noir

A slightly lighter, yet still moody, base for secondary information with an accent.

#696969 · #2F4F4F · #4682B4

CSS variables

:root {
  --noir-detective-mood-1: #000000;
  --noir-detective-mood-2: #2F4F4F;
  --noir-detective-mood-3: #696969;
  --noir-detective-mood-4: #4682B4;
  --noir-detective-mood-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-detective-mood": {
        1: "#000000",
        2: "#2F4F4F",
        3: "#696969",
        4: "#4682B4",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#2F4F4F

Color 3#696969

Color 4#4682B4

Color 5#808080

Accessibility

Contrast checker

2.4:1Fail

3.8:1AA18

5.1:1AA

5.3:1AA

2.4:1Fail

1.6:1Fail

2.2:1Fail

2.3:1Fail

3.8:1AA18

1.6:1Fail

1.3:1Fail

1.4:1Fail

5.1:1AA

2.2:1Fail

1.3:1Fail

1:1Fail

5.3:1AA

2.3:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Noir Detective Mood

City Puddle Reflection

Midnight Alley Tale

Noir Alley Nocturne