Back to palettes

Palette

Noir Alley Nocturne

Deep greys and stark contrasts, capturing the mysterious mood of a dark city alley.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4A4A4A#686868#868686#A4A4A4

Palette guide

How to use Noir Alley Nocturne

Overview

The Noir Alley Nocturne palette captures the mysterious mood of a dark city alley with its deep greys and stark contrasts. Ranging from the robust #2C2C2C to the luminous #A4A4A4, this palette offers a sophisticated and cinematic foundation for designs. Intermediate shades like #686868 and #868686 provide versatile options for building visual hierarchy and adding subtle texture, making it ideal for projects that require a moody, urban, or elegant dark aesthetic. Designers and developers will find it perfect for creating immersive user experiences with a touch of classic film noir drama.

Best used for

  • Cinematic game design
  • Urban photography portfolios
  • Dark mode app UIs
  • Sophisticated corporate websites
  • Abstract art showcases
  • Luxury product displays

Suggested color roles

primary

Utilize #2C2C2C as the foundational background for depth and a strong, dark aesthetic.

secondary

Employ #4A4A4A for main content areas, panels, or secondary background sections.

accent

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

background

The primary canvas should be #2C2C2C or #4A4A4A for a consistent dark, moody theme.

text

For primary text, use #A4A4A4 on dark backgrounds. #868686 can be used for secondary or less critical information.

Accessibility notes

  • Ensure #A4A4A4 provides sufficient contrast against #2C2C2C and #4A4A4A for all text elements.
  • Use #868686 for secondary text, but carefully verify contrast on darker elements like #4A4A4A.
  • Avoid using #686868 as text on #4A4A4A due to potential low contrast and readability issues.
  • Prioritize the lighter shades for all critical text and interactive elements to maintain readability.

Recommended combinations

Deep Night

Creates layered backgrounds, UI sections, and subtle gradients, evoking a deep night atmosphere.

#2C2C2C · #4A4A4A · #686868

Alley Glow

Ideal for content cards, secondary information, and subtle highlights, like a distant alley glow.

#4A4A4A · #868686 · #A4A4A4

Stark Luminescence

Use for prominent headers, calls to action, and main text on a dark base for stark, clear messaging.

#2C2C2C · #A4A4A4 · #868686

CSS variables

:root {
  --noir-alley-nocturne-1: #2C2C2C;
  --noir-alley-nocturne-2: #4A4A4A;
  --noir-alley-nocturne-3: #686868;
  --noir-alley-nocturne-4: #868686;
  --noir-alley-nocturne-5: #A4A4A4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-alley-nocturne": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#686868",
        4: "#868686",
        5: "#A4A4A4",
      }
    }
  }
}

Related searches

dark grey cinematic palettemysterious urban colorsmoody UI designcity night themesophisticated dark mode

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#686868
·
Color 4#868686
·
Color 5#A4A4A4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.8:1AA18
5.6:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.6:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
3.8:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5.6:1AA
3.6:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Noir Alley Nocturne

View all dark
Rainy City Noir
Dark Moody Portrait
Noir Alley Shadows
Noir City Rain
Noir Detective Mood
Blackwater Grotto Gloom