Palette

Noir Film Drama

The moody, high-contrast aesthetic of classic film noir cinematography, dark and captivating.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#3A3A3A#7A7A7A#2F2F2F#A00000

Palette guide

How to use Noir Film Drama

Overview

The "Noir Film Drama" palette masterfully captures the high-contrast, moody essence of classic cinematography. Dominated by deep, near-black tones like #0A0A0A and #2F2F2F, it sets an immediate tone of seriousness and intrigue. Mid-range grays such as #3A3A3A and #7A7A7A provide the subtle gradations necessary for depth and visual storytelling, typical of a grayscale film. The unexpected, powerful inclusion of dark red (#A00000) acts as a dramatic focal point, injecting a potent sense of danger or passion into an otherwise somber scheme. This palette is ideal for designers aiming to create impactful, retro-cinematic experiences, offering a strong foundation for both visual design and development of dramatic UIs.

Best used for

Vintage film festival branding
Graphic novels or comic book art
Theatrical playbill designs
High-impact advertising campaigns
Dark mode interfaces with a dramatic flair
Photography exhibitions focusing on contrast

Suggested color roles

primary

Near-black (#0A0A0A), serving as the dominant background or main container color for maximum drama.

secondary

Dark charcoal (#2F2F2F), excellent for secondary panels, footers, or subtle content separation.

accent

Deep, dramatic red (#A00000), reserved for critical calls-to-action, warnings, or powerful visual statements.

background

#0A0A0A (Provides a deep, immersive canvas for content.)

text

For light text, use #7A7A7A for a softer touch, or pure white for high contrast on #0A0A0A. For very subtle text on lighter grays, a darker gray like #3A3A3A might work.

Accessibility notes

Ensure #A00000 has sufficient contrast with any text placed on or near it, especially for interactive elements.
#7A7A7A may not provide enough contrast for body text against #3A3A3A; verify readability.
White text on #0A0A0A offers excellent contrast; use it for primary content.
Be mindful of colorblind users when #A00000 is used as a sole indicator for status or interaction.

Recommended combinations

Dramatic Focus

High-impact pairing for headlines or alerts, using red as a powerful highlight.

#0A0A0A · #A00000 · #7A7A7A

Grayscale Depth

Layered grays for content blocks, text, and subtle UI elements, creating visual hierarchy.

#2F2F2F · #7A7A7A · #3A3A3A

Retro Contrast

Strong foundation with a dramatic accent, ideal for striking visual elements and navigation.

#0A0A0A · #3A3A3A · #A00000

CSS variables

:root {
  --noir-film-drama-1: #0A0A0A;
  --noir-film-drama-2: #3A3A3A;
  --noir-film-drama-3: #7A7A7A;
  --noir-film-drama-4: #2F2F2F;
  --noir-film-drama-5: #A00000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-film-drama": {
        1: "#0A0A0A",
        2: "#3A3A3A",
        3: "#7A7A7A",
        4: "#2F2F2F",
        5: "#A00000",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#3A3A3A

Color 3#7A7A7A

Color 4#2F2F2F

Color 5#A00000

Accessibility

Contrast checker

1.7:1Fail

4.6:1AA

1.5:1Fail

2.4:1Fail

1.7:1Fail

2.6:1Fail

1.2:1Fail

1.4:1Fail

4.6:1AA

2.6:1Fail

3.1:1AA18

2:1Fail

1.5:1Fail

1.2:1Fail

3.1:1AA18

1.6:1Fail

2.4:1Fail

1.4:1Fail

2:1Fail

1.6:1Fail

Similar palettes

More like Noir Film Drama