Back to palettes

Palette

Noir Alley Shadows

A brooding and mysterious palette of deep grays and muted blues, reminiscent of a film noir setting.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Noir Alley Shadows 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 Alley Shadows.

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

Data visualization

#2F4F4F#36454F#4A5B69#607584#788D9C

Palette guide

How to use Noir Alley Shadows

Overview

The Noir Alley Shadows palette presents a brooding and mysterious collection of deep grays and muted blues, reminiscent of a classic film noir setting. Ranging from the profound #2F4F4F to the lighter #788D9C, and featuring the rich #36454F, this palette offers a sophisticated foundation for dramatic and atmospheric designs. The subtle shifts between shades like #4A5B69 and #607584 allow designers to craft nuanced visual hierarchies, making it perfect for cinematic themes, sophisticated tech interfaces, and any project aiming for a dark, moody, and deeply immersive aesthetic.

Best used for

  • Film trailer visual design
  • Dramatic storytelling websites
  • Sophisticated tech interfaces
  • Luxury automotive branding
  • Moody photography showcases
  • Dark mode app UIs

Suggested color roles

primary

Utilize #2F4F4F as the foundational background for depth and a strong, dark blue-grey aesthetic.

secondary

Employ #36454F for main content areas, panels, or secondary background sections.

accent

Reserve #788D9C for key highlights, interactive elements, or crucial calls to action to ensure clear visibility.

background

The primary canvas should be #2F4F4F or #36454F for a consistent dark, moody theme.

text

For primary text, use #788D9C on dark backgrounds. #607584 can be used for secondary or less critical information.

Accessibility notes

  • Ensure #788D9C provides sufficient contrast against #2F4F4F and #36454F for all text elements.
  • Use #607584 for secondary text, but carefully verify contrast on darker elements like #36454F.
  • Avoid using #4A5B69 as text on #36454F due to potential low contrast and readability issues.
  • Prioritize the lighter shades for all critical text and interactive elements to maintain readability.

Recommended combinations

Deepest Shadow

Creates layered backgrounds, UI sections, and deep, atmospheric gradients for profound depth.

#2F4F4F · #36454F · #4A5B69

Misty Blue

Ideal for content cards, secondary information, and subtle highlights, suggesting a misty blue ambiance.

#36454F · #607584 · #788D9C

Cinematic Glow

Use for prominent headers, calls to action, and main text on a dark base for a cinematic impact.

#2F4F4F · #788D9C · #607584

CSS variables

:root {
  --noir-alley-shadows-1: #2F4F4F;
  --noir-alley-shadows-2: #36454F;
  --noir-alley-shadows-3: #4A5B69;
  --noir-alley-shadows-4: #607584;
  --noir-alley-shadows-5: #788D9C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-alley-shadows": {
        1: "#2F4F4F",
        2: "#36454F",
        3: "#4A5B69",
        4: "#607584",
        5: "#788D9C",
      }
    }
  }
}

Related searches

dark blue grey cinematicmoody UI colorssophisticated dark thememysterious blue palettedramatic tech design

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#36454F
·
Color 3#4A5B69
·
Color 4#607584
·
Color 5#788D9C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.9:1Fail
2.6:1Fail
2
1.1:1Fail
1.4:1Fail
2.1:1Fail
2.9:1Fail
3
1.3:1Fail
1.4:1Fail
1.5:1Fail
2:1Fail
4
1.9:1Fail
2.1:1Fail
1.5:1Fail
1.4:1Fail
5
2.6:1Fail
2.9:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Noir Alley Shadows

View all dark
Noir Detective Mood
City Puddle Reflection
Dark Moody Portrait
Midnight Alley Tale
Noir Alley Nocturne
Noir City Rain