Palette

Art Deco Speakeasy

Sophisticated grays accented with warm, muted golds evoke the clandestine glamour of an Art Deco speakeasy.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4A4A4A#6C6C6C#C49F30#A07D20

Palette guide

How to use Art Deco Speakeasy

Overview

The "Art Deco Speakeasy" palette captures the clandestine glamour of the Prohibition era with sophisticated grays accented by warm, muted golds. This collection is ideal for designers and developers seeking to create designs that convey mystery, vintage charm, and an air of exclusive luxury. The deep charcoal #2C2C2C provides a dramatic, moody foundation, while the progressively lighter grays #4A4A4A and #6C6C6C offer versatile layering. The muted golds, #C49F30 and #A07D20, inject a sense of concealed opulence and warmth. This palette is perfect for high-end hospitality branding, vintage-inspired digital interfaces, or print materials that demand a distinctive, refined, and intriguing appearance.

Best used for

Cocktail bar or lounge branding
Vintage-themed event invitations
High-end menswear boutiques
Luxury spirit packaging
Film noir aesthetic designs
Exclusive club membership sites

Suggested color roles

primary

Use #4A4A4A, a sophisticated medium-dark gray, as a versatile base for main content areas or navigation, conveying modernity and elegance.

secondary

Apply #6C6C6C, a lighter, elegant gray, for secondary headings, subtle background textures, or informational panels, adding subtle contrast.

accent

Employ #C49F30, a bright, inviting muted gold, for key calls-to-action, important icons, or decorative flourishes that convey hidden luxury.

background

Select #2C2C2C, a deep, dramatic charcoal black, as a luxurious and immersive backdrop, making the golds and lighter grays truly pop.

text

For text on #2C2C2C, use #C49F30 for headlines and #6C6C6C for body text, ensuring excellent readability and a sophisticated feel.

Accessibility notes

Ensure #C49F30 text on #2C2C2C background meets WCAG AA contrast for body text.
Avoid using #6C6C6C text on #4A4A4A, as the contrast will likely be too low for readability.
The muted gold #C49F30 will need very dark text (e.g., #2C2C2C or black) when used as a background.
For critical UI elements, ensure good contrast by pairing #C49F30 with #2C2C2C.

Recommended combinations

Hidden Glamour

Perfect for a dramatic website hero section, with gold as the main headline and light gray for supporting text.

#2C2C2C · #C49F30 · #6C6C6C

Vintage Allure

Creates elegant content cards or product showcases, using the deeper gold for key details.

#4A4A4A · #A07D20 · #C49F30

Speakeasy Contrast

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

#6C6C6C · #2C2C2C · #C49F30

CSS variables

:root {
  --art-deco-speakeasy-1: #2C2C2C;
  --art-deco-speakeasy-2: #4A4A4A;
  --art-deco-speakeasy-3: #6C6C6C;
  --art-deco-speakeasy-4: #C49F30;
  --art-deco-speakeasy-5: #A07D20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-speakeasy": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6C6C6C",
        4: "#C49F30",
        5: "#A07D20",
      }
    }
  }
}

Hex values

Color 1#2C2C2C

Color 2#4A4A4A

Color 3#6C6C6C

Color 4#C49F30

Color 5#A07D20

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

5.6:1AA

3.6:1AA18

1.6:1Fail

1.7:1Fail

3.5:1AA18

2.3:1Fail