Palette

Art Deco Metropolis

Sophisticated greys paired with opulent gold, reflecting the towering elegance of an Art Deco city.

NeutralElegant5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Art Deco Metropolis 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 Art Deco Metropolis.

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

Data visualization

#212121#616161#BDBDBD#FFD700#E0B400

Palette guide

How to use Art Deco Metropolis

Overview

The "Art Deco Metropolis" palette combines sophisticated greys with opulent gold, reflecting the towering elegance and geometric precision of an Art Deco city. This collection is perfect for designers and developers aiming to create a modern, luxurious, and timeless aesthetic. The deep charcoal #212121 provides a strong, dramatic foundation, while the lighter greys #616161 and #BDBDBD offer versatility for various elements. The radiant golds, #FFD700 and #E0B400, inject a sense of glamour and focal interest. This palette is ideal for high-end branding, sleek digital interfaces, and print materials that require a distinctive, polished, and powerful visual identity.

Best used for

Luxury automotive branding
High-end interior design portfolios
Exclusive event invitations
Modern art gallery websites
Premium product packaging
Financial advisory services

Suggested color roles

primary

Use #616161, a strong, versatile mid-grey, as a core color for main content blocks, navigation, or structural elements, offering a modern feel.

secondary

Apply #BDBDBD, a lighter, elegant grey, for background panels, subtle borders, or secondary informational text, complementing the primary.

accent

Employ #FFD700, a vibrant, pure gold, for calls-to-action, important icons, or striking decorative elements that demand immediate attention.

background

Select #212121, a deep, dramatic charcoal black, as a luxurious and modern backdrop, making the golds and lighter greys pop with intensity.

text

For text on #212121, use #FFD700 for headlines and #BDBDBD for body text to ensure excellent readability and a sophisticated look.

Accessibility notes

Ensure #FFD700 or #BDBDBD text on #212121 background meets WCAG AA contrast for body text.
Avoid using #616161 text on #BDBDBD, as the contrast will be too low for readability.
When using #FFD700 as a background, ensure text is very dark (e.g., #212121 or black) for good contrast.
For critical UI elements, use #FFD700 against #212121 to provide clear visual cues.

Recommended combinations

Dramatic Glamour

Perfect for a high-impact hero section, with gold as the main headline and light gray for supporting text.

#212121 · #FFD700 · #BDBDBD

Sleek Modern

Creates elegant content cards or product listings, using the darker gold for key details.

#616161 · #E0B400 · #BDBDBD

Urban Contrast

Ideal for a clean navigation bar, with the light grey as the base, charcoal for active states, and gold for icons.

#BDBDBD · #212121 · #FFD700

CSS variables

:root {
  --art-deco-metropolis-1: #212121;
  --art-deco-metropolis-2: #616161;
  --art-deco-metropolis-3: #BDBDBD;
  --art-deco-metropolis-4: #FFD700;
  --art-deco-metropolis-5: #E0B400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-metropolis": {
        1: "#212121",
        2: "#616161",
        3: "#BDBDBD",
        4: "#FFD700",
        5: "#E0B400",
      }
    }
  }
}

Hex values

Color 1#212121

Color 2#616161

Color 3#BDBDBD

Color 4#FFD700

Color 5#E0B400

Accessibility

Contrast checker

2.6:1Fail

8.6:1AAA

11.5:1AAA

8.2:1AAA

2.6:1Fail

3.3:1AA18

4.4:1AA18

3.2:1AA18

8.6:1AAA

3.3:1AA18

1.3:1Fail

1:1Fail

11.5:1AAA

4.4:1AA18

1.3:1Fail

1.4:1Fail

8.2:1AAA

3.2:1AA18

1:1Fail

1.4:1Fail

Similar palettes

More like Art Deco Metropolis