Back to palettes

Palette

Film Noir Shadows

Captures the dramatic contrast and deep, enigmatic shadows of classic black and white film noir cinematography.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0d0d0d#262626#404040#595959#737373

Palette guide

How to use Film Noir Shadows

Overview

The Film Noir Shadows palette is a masterclass in monochrome, perfectly capturing the dramatic depth and enigmatic mood of classic black and white cinema. This curated collection of greys, ranging from the near-black #0d0d0d to the lighter #737373, provides a sophisticated foundation for projects demanding a serious, timeless aesthetic. Designers can leverage the stark contrast between #0d0d0d and #404040 for impactful statements, while developers will appreciate the seamless gradient potential from #262626 to #595959. Ideal for creating a sense of mystery, elegance, or gravitas, this palette ensures visual coherence and a powerful emotional resonance across digital and print media. Its versatility for UI elements, branding, and atmospheric visuals makes it an invaluable asset for a refined, understated design.

Best used for

  • Luxury brand websites and apps
  • Art gallery portfolios and exhibition branding
  • Documentary film titles and mood boards
  • Sleek, minimalist corporate presentations
  • Dark mode UI themes for software
  • Photography portfolios showcasing contrast

Suggested color roles

primary

For dominant elements, large headings, or backgrounds demanding ultimate depth. Use #0d0d0d for a truly immersive, dark foundation.

secondary

Excellent for large content blocks, secondary navigation, or card backgrounds. #262626 provides substantial visual weight without the absolute intensity of the primary.

accent

Apply #595959 for interactive elements, subtle dividers, or highlight states to introduce a slight lift and distinction within the monochrome scheme.

background

Opt for #262626 as a sophisticated base that allows lighter text and elements to emerge dramatically, or #0d0d0d for maximum impact.

text

For optimal readability against darker backgrounds like #0d0d0d or #262626, use #737373 for body text, or a pure white for headings and critical information.

Accessibility notes

  • Ensure sufficient contrast (AA or AAA) when pairing lighter greys like #737373 with darker backgrounds such as #0d0d0d or #262626 for body text.
  • Avoid using #404040 or #595959 for small text on backgrounds of similar luminance, as contrast may be insufficient.
  • For interactive elements, maintain at least a 3:1 contrast ratio against adjacent colors to meet WCAG standards.
  • Consider using a pure white or very light grey for critical text elements on the darkest backgrounds (#0d0d0d, #262626) to maximize readability.

Recommended combinations

High Contrast Duo

Ideal for stark headings and body text on a dark canvas, evoking classic film titles or powerful statements.

#0D0D0D · #737373 · #262626

Subtle Depth

Perfect for layered UI components, card designs, or subtle gradients in backgrounds, adding visual interest without harsh lines.

#262626 · #404040 · #595959

Dramatic Accent

Use #0d0d0d as a background, #737373 for main text, and #595959 for interactive elements or subtle highlights to guide user attention.

#0D0D0D · #595959 · #737373

CSS variables

:root {
  --film-noir-shadows-1: #0d0d0d;
  --film-noir-shadows-2: #262626;
  --film-noir-shadows-3: #404040;
  --film-noir-shadows-4: #595959;
  --film-noir-shadows-5: #737373;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "film-noir-shadows": {
        1: "#0d0d0d",
        2: "#262626",
        3: "#404040",
        4: "#595959",
        5: "#737373",
      }
    }
  }
}

Related searches

monochrome color palettedark grey color schemefilm noir aesthetic colorsmoody web design colorselegant black and white palette

Palette colors

Hex values

Color 1#0d0d0d
·
Color 2#262626
·
Color 3#404040
·
Color 4#595959
·
Color 5#737373
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.8:1Fail
4.1:1AA18
2
1.3:1Fail
1.5:1Fail
2.2:1Fail
3.2:1AA18
3
1.9:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
2.8:1Fail
2.2:1Fail
1.5:1Fail
1.5:1Fail
5
4.1:1AA18
3.2:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Film Noir Shadows

View all monochrome
Noir City Shadows
Ink Wash Shadow
Noir Film Shadows
Obsidian Night Sky
Shadowed Obsidian
Velveteen Shadow Play