Palette

Film Noir Echo

A dramatic and moody palette inspired by classic film noir, blending shadowy grays with deep, rich reds.

darkretro5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#333333#4F000B#A01C1C#EDE0D4

Palette guide

How to use Film Noir Echo

Overview

The Film Noir Echo palette evokes the classic, dramatic aesthetics of vintage cinema, perfect for projects requiring a sophisticated yet mysterious atmosphere. This dark-themed collection masterfully blends shadowy grays like #1A1A1A and #333333 with compelling, rich reds such as the deep, almost blood-red #4F000B and the more vibrant #A01C1C. A soft, antique cream, #EDE0D4, provides crucial contrast and a touch of old-world elegance. Designers and developers can leverage this palette to create impactful branding, immersive digital experiences, or striking print materials that convey intrigue, luxury, and a timeless retro charm. It's ideal for conveying depth and emotional resonance.

Best used for

Luxury brand identity
Vintage-themed websites
Dramatic UI design
Film posters and promotional materials
Mystery or thriller book covers
Themed event invitations

Suggested color roles

primary

Ideal for primary dark backgrounds, headers, or large blocks of text, setting a deep, immersive tone with #1A1A1A.

secondary

Use #333333 for secondary backgrounds, borders, subtle UI elements, or darker body text to add depth without harsh contrast.

accent

Perfect for calls to action, important notifications, interactive elements, or striking visual highlights due to the vibrant intensity of #A01C1C.

background

Effective as a contrasting light background for sections, cards, or hero areas using #EDE0D4, offering readability and a vintage touch against darker elements.

text

Excellent for primary body text on dark backgrounds like #1A1A1A or #333333, ensuring strong readability and maintaining the palette's sophisticated feel with #EDE0D4.

Accessibility notes

Ensure sufficient contrast when using #333333 for text on #1A1A1A backgrounds; larger text sizes or bolding may be necessary for readability.
The vibrant #A01C1C provides excellent contrast against #1A1A1A or #333333 for critical UI elements, but always check against #4F000B.
#EDE0D4 offers high readability for text when placed on any of the darker gray or red shades, making it ideal for body copy.
Avoid using #4F000B as text on #1A1A1A or #333333 for small font sizes, as contrast might be insufficient for accessibility standards.

Recommended combinations

Classic Noir

Ideal for a striking dark mode UI, pairing a deep background with readable light text and a bold accent for calls to action.

#1A1A1A · #EDE0D4 · #A01C1C

Moody Depth

Use for layered backgrounds, subtle gradients, or accentuating elements in a sophisticated, understated design.

#333333 · #4F000B · #1A1A1A

Retro Elegance

Perfect for vintage-inspired headings, cards, or featured content, providing a lighter base with clear text and a vibrant highlight.

#EDE0D4 · #333333 · #A01C1C

CSS variables

:root {
  --film-noir-echo-1: #1A1A1A;
  --film-noir-echo-2: #333333;
  --film-noir-echo-3: #4F000B;
  --film-noir-echo-4: #A01C1C;
  --film-noir-echo-5: #EDE0D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "film-noir-echo": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#4F000B",
        4: "#A01C1C",
        5: "#EDE0D4",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#333333

Color 3#4F000B

Color 4#A01C1C

Color 5#EDE0D4

Accessibility

Contrast checker

1.4:1Fail

1.1:1Fail

2.2:1Fail

13.4:1AAA

1.4:1Fail

1.2:1Fail

1.6:1Fail

9.8:1AAA

1.1:1Fail

1.2:1Fail

2:1Fail

12.1:1AAA

2.2:1Fail

1.6:1Fail

2:1Fail

6.1:1AA

13.4:1AAA

9.8:1AAA

12.1:1AAA

6.1:1AA

Similar palettes

More like Film Noir Echo

View all dark

Speakeasy Lounge Vibe

Clockwork Brass Patina

Industrial Steampunk Grit

Steampunk Goggles

Steampunk Inventor's Workshop

Sultry Jazz