Back to palettes

Palette

Vintage Film Noir

A moody, dramatic grayscale evoking the timeless suspense and style of classic film noir.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#202020#404040#606060#808080#A0A0A0

Palette guide

How to use Vintage Film Noir

Overview

The Vintage Film Noir palette is a dramatic and sophisticated grayscale collection, expertly designed to evoke the timeless suspense and style of classic cinema. Ranging from the deep #202020 to the lighter #A0A0A0, this palette provides a stark, moody foundation for any project. Developers and designers can leverage these precise hex codes, including #404040 and #606060, to create striking contrasts and define visual hierarchy without the distraction of color. It's an indispensable tool for crafting elegant, impactful designs that demand attention and convey a sense of gravitas and classic allure.

Best used for

  • Brand identities requiring a minimalist and serious tone
  • Websites for luxury brands or high-end services
  • Editorial design for art, photography, or fashion magazines
  • UI/UX for professional tools or dark mode interfaces
  • Creative projects inspired by classic cinema or mystery
  • Photography portfolios emphasizing form and texture

Suggested color roles

primary

Use #202020 for dominant elements like main backgrounds, headers, or strong graphical accents to establish a powerful, dark foundation.

secondary

Employ #404040 for sub-headers, navigation elements, or secondary content blocks to provide subtle depth against the primary dark.

accent

Utilize #808080 sparingly for subtle highlights, interactive states, or delicate dividing lines, offering a touch of visual relief.

background

For a classic Film Noir look, #202020 works best as a background, with lighter shades for content. Alternatively, #404040 provides a slightly less intense dark canvas.

text

For body text, #A0A0A0 or #808080 offers excellent contrast against darker backgrounds like #202020 or #404040.

Accessibility notes

  • Ensure sufficient contrast when placing #A0A0A0 text on #606060 or lighter backgrounds.
  • The contrast between #202020 and #A0A0A0 is excellent for readability, meeting WCAG AA standards.
  • Avoid using #808080 for body text on #606060 as contrast may be insufficient for accessibility.
  • For interactive elements, ensure hover/focus states maintain high contrast against their background.

Recommended combinations

Deep Contrast

Creates strong, dramatic visuals, perfect for headlines and key information.

#202020 · #A0A0A0 · #606060

Subtle Layers

Ideal for nuanced UI elements, offering gentle transitions and hierarchy.

#404040 · #606060 · #808080

Highlight Focus

Draws attention to specific content with lighter elements against a dark, moody backdrop.

#202020 · #808080 · #A0A0A0

CSS variables

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

Tailwind config

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

Related searches

monochrome noir color schemegrayscale film palettedark dramatic ui colorsclassic black white greysmoody retro design

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
6.2:1AA
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.2:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Vintage Film Noir

View all monochrome
Noir City Shadows
Film Noir Shadows
Monochromatic Storm Sky
Noir Alley Mood
Retro Dark Cinema
Volcanic Glass Shard