Palette

Noir City Shadows

A dramatic grayscale palette, reminiscent of classic film noir and shadowy urban alleys.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#222222#444444#666666#AAAAAA

Palette guide

How to use Noir City Shadows

Overview

The Noir City Shadows palette offers a dramatic grayscale, reminiscent of classic film noir and shadowy urban alleys. Ranging from the absolute #000000 to the bright #AAAAAA, this palette provides a powerful and timeless foundation for designs. Intermediate shades like #444444 and #666666 allow for subtle transitions and layered depth, perfect for creating impactful visual narratives. Designers and developers will find this palette ideal for projects requiring a vintage, enigmatic, or minimalist dark aesthetic, ensuring a sleek and highly contrasting user experience.

Best used for

Classic black and white photography
Minimalist branding
Film noir inspired designs
Sophisticated app UIs
Dramatic websites
Dark mode themes

Suggested color roles

primary

Utilize #000000 as the foundational background for ultimate drama and depth.

secondary

Employ #222222 for secondary backgrounds, panels, or content containers, offering a deep charcoal.

accent

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

background

The primary canvas should be #000000 or #222222 for a consistent dark, dramatic theme.

text

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

Accessibility notes

Ensure #AAAAAA provides sufficient contrast against #000000 and #222222 for all text elements.
Use #666666 for secondary text, but carefully verify contrast on darker elements like #222222.
Avoid using #444444 as text on #222222 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 Noir

Ideal for layered backgrounds, UI sections, and creating deep, subtle gradients for profound depth.

#000000 · #222222 · #444444

Shadow Play

Excellent for content cards, secondary information, and subtle highlights, mimicking light and shadow interaction.

#222222 · #666666 · #AAAAAA

Stark Lumina

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

#000000 · #AAAAAA · #666666

CSS variables

:root {
  --noir-city-shadows-1: #000000;
  --noir-city-shadows-2: #222222;
  --noir-city-shadows-3: #444444;
  --noir-city-shadows-4: #666666;
  --noir-city-shadows-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-city-shadows": {
        1: "#000000",
        2: "#222222",
        3: "#444444",
        4: "#666666",
        5: "#AAAAAA",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#222222

Color 3#444444

Color 4#666666

Color 5#AAAAAA

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

3.7:1AA18

9:1AAA

1.3:1Fail

1.6:1Fail

2.8:1Fail

6.8:1AA

2.2:1Fail

1.6:1Fail

1.7:1Fail

4.2:1AA18

3.7:1AA18

2.8:1Fail

1.7:1Fail

2.5:1Fail

9:1AAA

6.8:1AA

4.2:1AA18

2.5:1Fail

Similar palettes

More like Noir City Shadows