Back to palettes

Palette

Noir Film Shadows

A dramatic monochromatic sequence of deep blacks and greys, evoking the mysterious atmosphere of classic noir films.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#202020#404040#606060#808080

Palette guide

How to use Noir Film Shadows

Overview

The "Noir Film Shadows" palette is a quintessential monochromatic scheme, designed for maximum dramatic effect and elegant simplicity. Featuring a perfect gradient from absolute black (#000000) through progressively lighter grays to a mid-tone gray (#808080), this palette is inherently balanced and highly versatile. It excels at creating illusions of depth, shadow, and light, reminiscent of classic black-and-white photography or cinema. Designers can leverage this palette for projects demanding a sleek, professional, or mysterious aesthetic, where the interplay of light and shadow is paramount. Developers will find this consistent grayscale range easy to implement for dark mode themes, subtle hover states, and clear visual hierarchy.

Best used for

  • High-end product photography backdrops
  • Conceptual art websites
  • Dark mode operating system interfaces
  • Elegant editorial design
  • Architectural portfolio presentations
  • Abstract digital art

Suggested color roles

primary

Absolute black (#000000), serving as the dominant background or deepest shadow for striking contrast.

secondary

Very dark gray (#202020), ideal for secondary panels, borders, or subtle content separation.

accent

Mid-tone gray (#808080), used sparingly for delicate highlights, disabled states, or subtle UI elements.

background

#000000 (Provides a deep, immersive, and dramatic canvas.)

text

For primary text on dark backgrounds, use white or a very light gray like #AAAAAA. For secondary text on #404040 or #606060, a darker gray like #202020 could be used with careful contrast checking.

Accessibility notes

  • White text on #000000, #202020, and #404040 will provide excellent contrast.
  • #606060 and #808080 may not offer sufficient contrast for text on dark backgrounds; use for decorative elements.
  • Ensure interactive elements are clearly distinguishable, perhaps by using a strong border or hover state.
  • Avoid using #808080 for body text on anything lighter than #202020 to maintain readability.

Recommended combinations

Deep Contrast

Bold statements and dramatic visual hierarchy, emphasizing light on dark.

#000000 · #808080 · #404040

Grayscale Depth

Layered elements for sophisticated content blocks and subtle UI components.

#202020 · #606060 · #404040

Soft Shadow

A lighter, more understated dark theme for secondary information or less dramatic areas.

#404040 · #808080 · #202020

CSS variables

:root {
  --noir-film-shadows-1: #000000;
  --noir-film-shadows-2: #202020;
  --noir-film-shadows-3: #404040;
  --noir-film-shadows-4: #606060;
  --noir-film-shadows-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-film-shadows": {
        1: "#000000",
        2: "#202020",
        3: "#404040",
        4: "#606060",
        5: "#808080",
      }
    }
  }
}

Related searches

black and grey color schemeelegant dark palettemonochrome UI designfilm noir aesthetic colorsdark mode gradient palette

Palette colors

Hex values

Color 1#000000
·
Color 2#202020
·
Color 3#404040
·
Color 4#606060
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.3:1AA18
5.3:1AA
2
1.3:1Fail
1.6:1Fail
2.6:1Fail
4.1:1AA18
3
2:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
4
3.3:1AA18
2.6:1Fail
1.6:1Fail
1.6:1Fail
5
5.3:1AA
4.1:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Noir Film Shadows

View all monochrome
Obsidian Night Sky
Shadowed Obsidian
Volcanic Glass Shards
Winter Gloom
Basalt Pillar Shades
Gothic Cathedral Stone