Palette

Retro Dark Cinema

A classic black and white film aesthetic, evoking mystery and timeless elegance.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Dark Cinema 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 Retro Dark Cinema.

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

Data visualization

#2B2B2B#505050#969696#C0C0C0#EAEAEA

Palette guide

How to use Retro Dark Cinema

Overview

The Retro Dark Cinema palette offers a sophisticated, monochrome gradient, perfect for evoking mystery and timeless elegance. With shades ranging from deep #2B2B2B to light #EAEAEA, including #505050, #969696, and #C0C0C0, this collection is ideal for creating refined, classic aesthetics. Designers and developers can leverage these tones for subtle depth, dramatic backdrops, and a vintage film noir feel, ensuring a polished and cohesive visual experience that emphasizes mood and understated beauty.

Best used for

Film and photography websites
Luxury branding and packaging
Minimalist user interfaces (UI)
Elegant presentations and portfolios
Vintage-themed apps
Editorial design and art books

Suggested color roles

primary

#2B2B2B serves as a deep background or for main structural elements, providing a strong foundation.

secondary

#505050 offers supporting backgrounds, subtle dividers, or secondary navigation elements.

accent

#C0C0C0 is ideal for highlights, interactive states, or secondary text that needs to stand out subtly.

background

#2B2B2B creates a dark, immersive base, while #EAEAEA offers a light, clean canvas for contrast.

text

Use #EAEAEA for optimal readability on dark backgrounds like #2B2B2B or #505050; use #2B2B2B on light backgrounds.

Accessibility notes

Ensure sufficient contrast between text and background, e.g., #EAEAEA on #2B2B2B, for all content.
Avoid using similar shades like #969696 text on a #C0C0C0 background due to low readability.
Use larger font sizes or bolding for lighter grays as text on darker gray backgrounds to improve legibility.
Test all text/background combinations with a contrast checker to ensure WCAG AA compliance.

Recommended combinations

Deep Focus

Perfect for cinematic intros, dark mode UI, or creating a dramatic focal point.

#2B2B2B · #EAEAEA · #505050

Subtle Gradient

Excellent for layered backgrounds, subtle transitions, or adding depth to UI elements.

#505050 · #969696 · #C0C0C0

Highlighted Text

Ideal for headlines, key information display, or elegant content presentation.

#2B2B2B · #C0C0C0 · #EAEAEA

CSS variables

:root {
  --retro-dark-cinema-1: #2B2B2B;
  --retro-dark-cinema-2: #505050;
  --retro-dark-cinema-3: #969696;
  --retro-dark-cinema-4: #C0C0C0;
  --retro-dark-cinema-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-dark-cinema": {
        1: "#2B2B2B",
        2: "#505050",
        3: "#969696",
        4: "#C0C0C0",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#2B2B2B

Color 2#505050

Color 3#969696

Color 4#C0C0C0

Color 5#EAEAEA

Accessibility

Contrast checker

1.8:1Fail

4.8:1AA

7.8:1AAA

11.8:1AAA

1.8:1Fail

2.7:1Fail

4.4:1AA18

6.7:1AA

4.8:1AA

2.7:1Fail

1.6:1Fail

2.5:1Fail

7.8:1AAA

4.4:1AA18

1.6:1Fail

1.5:1Fail

11.8:1AAA

6.7:1AA

2.5:1Fail

1.5:1Fail

Similar palettes

More like Retro Dark Cinema