Back to palettes

Palette

Noir Alley Mood

A brooding gradient of deep grays, capturing the gritty and enigmatic atmosphere of a shadowy city alleyway.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C1C1C#36454F#696969#708090#A9A9A9

Palette guide

How to use Noir Alley Mood

Overview

The Noir Alley Mood palette captures the gritty and enigmatic atmosphere of a shadowy city alleyway with its brooding gradient of deep grays, subtly infused with blue. From the intense #1C1C1C to the lighter #A9A9A9, and featuring the unique #36454F, this palette provides a sophisticated foundation for designs that require a serious, urban, or mysterious tone. The varying shades like #696969 and #708090 enable designers to craft nuanced visual hierarchies, making it perfect for app interfaces, urban branding, or any project aiming for a dark, moody, and deeply atmospheric aesthetic.

Best used for

  • Urban-themed website design
  • Mystery novel covers
  • Sophisticated app UIs
  • Industrial branding
  • Architectural visualizations
  • Dark mode interfaces

Suggested color roles

primary

Use #1C1C1C as the deepest background, providing an intense and foundational dark canvas.

secondary

Employ #36454F for main content areas, panels, or secondary background sections for a subtle blue-grey depth.

accent

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

background

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

text

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

Accessibility notes

  • Ensure #A9A9A9 provides sufficient contrast against #1C1C1C and #36454F for all text elements.
  • Use #708090 for secondary text, but carefully verify contrast on darker elements like #36454F.
  • Avoid using #696969 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

Deep Urban

Creates layered backgrounds, UI sections, and deep, atmospheric gradients for an urban feel.

#1C1C1C · #36454F · #696969

Streetlight Glow

Ideal for content cards, secondary information, and subtle highlights, mimicking a distant streetlight.

#36454F · #708090 · #A9A9A9

Dramatic Highlight

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

#1C1C1C · #A9A9A9 · #708090

CSS variables

:root {
  --noir-alley-mood-1: #1C1C1C;
  --noir-alley-mood-2: #36454F;
  --noir-alley-mood-3: #696969;
  --noir-alley-mood-4: #708090;
  --noir-alley-mood-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-alley-mood": {
        1: "#1C1C1C",
        2: "#36454F",
        3: "#696969",
        4: "#708090",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

urban dark palettemoody grey bluemysterious city colorsgritty website themedark industrial design

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#36454F
·
Color 3#696969
·
Color 4#708090
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
4.2:1AA18
7.3:1AAA
2
1.7:1Fail
1.8:1Fail
2.4:1Fail
4.2:1AA18
3
3.1:1AA18
1.8:1Fail
1.4:1Fail
2.3:1Fail
4
4.2:1AA18
2.4:1Fail
1.4:1Fail
1.7:1Fail
5
7.3:1AAA
4.2:1AA18
2.3:1Fail
1.7:1Fail

Similar palettes

More like Noir Alley Mood

View all monochrome
Charcoal Smoke Hues
Gothic Cathedral Stone
Gothic Stone Hearth
Ink Wash Shadow
Iron Gate Silhouette
Midnight Ink Spill