Palette

Shadowed Metropolis Tale

A stark and moody palette, drawing inspiration from the dramatic contrasts and deep shadows of classic film noir, enigmatic and stylish.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Metropolis Tale 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 Shadowed Metropolis Tale.

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

Data visualization

#000000#36454F#800000#F5F5DC#C0C0C0

Palette guide

How to use Shadowed Metropolis Tale

Overview

The Shadowed Metropolis Tale palette captures the stark, dramatic contrasts of classic film noir, blending deep shadows with muted highlights. Anchored by pure #000000 black and the sophisticated charcoal grey #36454F, it evokes a sense of mystery and elegance. A bold, rich accent is introduced with #800000, a deep maroon that adds a touch of classic drama. The palette is balanced by the near-white #F5F5DC, offering a necessary bright contrast, and a cool #C0C0C0 silver for subtle detailing. This scheme is perfect for designers and developers aiming to create a timeless, enigmatic, and stylish visual experience.

Best used for

Film noir inspired digital experiences
Luxury and high-end brand identity
Sophisticated editorial and print layouts
Dramatic website themes and landing pages
Upscale event collateral and invitations
Vintage-inspired packaging design

Suggested color roles

primary

Utilize #000000 as the dominant, foundational color for backgrounds or large content blocks, establishing a strong, dramatic tone.

secondary

Employ #36454F for secondary backgrounds, headers, or subtle UI elements, providing depth without overwhelming the primary black.

accent

Apply #800000 sparingly for powerful calls to action, headings, or dramatic graphical elements to add a touch of classic intensity.

background

Use #F5F5DC as a primary background for content areas where high readability is key, offering a bright, elegant canvas.

text

Pair #000000 or #36454F on #F5F5DC for clear body text, or use #C0C0C0 on #000000 for elegant, readable text in dark mode.

Accessibility notes

Ensure high contrast for text on backgrounds, especially #000000 on #F5F5DC and #C0C0C0 on #000000, for WCAG compliance.
Text in #36454F on a pure #000000 background might lack sufficient contrast for smaller font sizes; check carefully.
Use #800000 as an accent with caution, verifying its contrast against both dark and light backgrounds for visibility.
The #F5F5DC cream provides excellent readability for body text when paired with #000000 or #36454F.

Recommended combinations

Stark & Bold

Perfect for high-impact titles, primary calls to action, and hero sections demanding immediate attention.

#000000 · #F5F5DC · #800000

Subtle Depth

Ideal for secondary information, subtle UI elements, or creating layered backgrounds with a sophisticated feel.

#36454F · #C0C0C0 · #000000

Elegant Trio

Effective for headers, decorative elements, or brand marks that require a touch of vintage elegance.

#F5F5DC · #800000 · #36454F

CSS variables

:root {
  --shadowed-metropolis-tale-1: #000000;
  --shadowed-metropolis-tale-2: #36454F;
  --shadowed-metropolis-tale-3: #800000;
  --shadowed-metropolis-tale-4: #F5F5DC;
  --shadowed-metropolis-tale-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-metropolis-tale": {
        1: "#000000",
        2: "#36454F",
        3: "#800000",
        4: "#F5F5DC",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#36454F

Color 3#800000

Color 4#F5F5DC

Color 5#C0C0C0

Accessibility

Contrast checker

2.1:1Fail

1.9:1Fail

19:1AAA

11.5:1AAA

2.1:1Fail

1.1:1Fail

8.9:1AAA

5.4:1AA

1.9:1Fail

1.1:1Fail

9.9:1AAA

6:1AA

19:1AAA

8.9:1AAA

9.9:1AAA

1.6:1Fail

11.5:1AAA

5.4:1AA

6:1AA

1.6:1Fail

Similar palettes

More like Shadowed Metropolis Tale

View all dark

Black Rose Bloom

Deep Plum Twilight

Enigmatic Shadow Tale

Gothic Manor Shadow

Gothic Violet Shadow

Midnight Masquerade Veil