Palette

Noir Film Noir

Dramatic and sophisticated, evoking the timeless shadows and sharp contrasts of old cinema.

MonochromeDark5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D0D0D#2C2C2C#4F4F4F#7C7C7C#AAAAAA

Palette guide

How to use Noir Film Noir

Overview

The "Noir Film Noir" palette is a sophisticated, purely monochromatic scheme designed to evoke the timeless elegance and sharp contrasts of classic cinema. With a range spanning from deep near-black (#0D0D0D) to a very light gray (#AAAAAA), this palette provides ample flexibility for creating depth and visual hierarchy without relying on color. The intermediate grays, #2C2C2C, #4F4F4F, and #7C7C7C, offer smooth transitions, perfect for subtle gradients, shadows, and layered elements. Designers can use this palette to achieve a refined, minimalist aesthetic that emphasizes form, texture, and light play, making it ideal for projects demanding a sophisticated, understated, yet powerful visual presence.

Best used for

Luxury brand websites or packaging
Minimalist UI design
Art photography portfolios
High-end fashion editorial layouts
Architectural visualization
Abstract art or graphic design

Suggested color roles

primary

The deepest near-black (#0D0D0D), serving as the canvas or primary background for a strong, sophisticated base.

secondary

Dark charcoal (#2C2C2C), ideal for secondary content blocks, sidebars, or deep shadows.

accent

Light gray (#AAAAAA), used sparingly for delicate highlights, subtle borders, or secondary interactive states.

background

#0D0D0D (Establishes a dramatic, deep setting for all content.)

text

For primary body text on dark backgrounds, use #AAAAAA or a bright white. For secondary text or captions on lighter grays like #7C7C7C, use #2C2C2C or #0D0D0D.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using grays like #7C7C7C for text on #4F4F4F.
White text on #0D0D0D provides excellent contrast; use it for main content.
Be cautious with #AAAAAA text on #7C7C7C, as it might fail contrast requirements for body text.
Use font weight and size to enhance readability for lower contrast pairings.

Recommended combinations

Classic Contrast

Bold foundation with bright highlights, perfect for headers and key information.

#0D0D0D · #AAAAAA · #4F4F4F

Subtle Layers

Creates depth and hierarchy through varying shades of gray for content areas.

#2C2C2C · #7C7C7C · #4F4F4F

Monochrome Elegance

A sophisticated blend for elegant typography and minimalist layouts.

#0D0D0D · #7C7C7C · #AAAAAA

CSS variables

:root {
  --noir-film-noir-1: #0D0D0D;
  --noir-film-noir-2: #2C2C2C;
  --noir-film-noir-3: #4F4F4F;
  --noir-film-noir-4: #7C7C7C;
  --noir-film-noir-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-film-noir": {
        1: "#0D0D0D",
        2: "#2C2C2C",
        3: "#4F4F4F",
        4: "#7C7C7C",
        5: "#AAAAAA",
      }
    }
  }
}

Hex values

Color 1#0D0D0D

Color 2#2C2C2C

Color 3#4F4F4F

Color 4#7C7C7C

Color 5#AAAAAA

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

4.7:1AA

8.4:1AAA

1.4:1Fail

1.7:1Fail

3.3:1AA18

6:1AA

2.4:1Fail

1.7:1Fail

2:1Fail

3.5:1AA18

4.7:1AA

3.3:1AA18

2:1Fail

1.8:1Fail

8.4:1AAA

6:1AA

3.5:1AA18

1.8:1Fail

Similar palettes

More like Noir Film Noir

Grayscale Urban Sketch