Palette

Art Deco Opal

Sophisticated neutrals with a hint of shimmer, reminiscent of polished metals and opulent opals from the Art Deco era.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C5C5C#8C8C8C#BDBDBD#EFEFEF#3A3A3A

Palette guide

How to use Art Deco Opal

Overview

The "Art Deco Opal" palette presents a sophisticated range of neutrals with a hint of shimmer, reminiscent of polished metals and opulent opals from the Art Deco era. This collection is ideal for designers and developers seeking to create designs that convey elegance, timelessness, and minimalist luxury. The deep charcoal #3A3A3A provides a strong anchor, while the progression through #5C5C5C, #8C8C8C, and #BDBDBD offers versatile mid-tones for layered depth. The lightest shade, #EFEFEF, provides a clean, luminous highlight. This palette is perfect for high-end corporate branding, sleek digital interfaces, or print materials that demand a refined, understated, yet opulent appeal.

Best used for

Modern corporate branding
High-tech product design
Minimalist website interfaces
Architectural firm portfolios
Luxury packaging for electronics
Event design for formal occasions

Suggested color roles

primary

Use #5C5C5C, a robust, elegant dark gray, as a core color for main content blocks, navigation, or structural elements, offering a modern, solid feel.

secondary

Apply #8C8C8C, a balanced medium gray, for subheadings, background panels, or informational text, adding subtle contrast.

accent

Employ #3A3A3A, a deep, rich charcoal, for strong calls-to-action, important icons, or dramatic section separators to add gravitas and definition.

background

Select #EFEFEF, a very light, almost white gray, as a clean, expansive canvas, ensuring excellent readability for darker text.

text

Choose #3A3A3A, a deep, dark charcoal, for body text, ensuring strong readability against lighter backgrounds and a cohesive, elegant feel.

Accessibility notes

Ensure #3A3A3A text on #EFEFEF background meets WCAG AAA contrast for body text.
Avoid using #BDBDBD text on #8C8C8C, as the contrast will likely be too low for readability.
For interactive elements, use #3A3A3A against #EFEFEF to provide clear visual cues.
When using #5C5C5C as a background, ensure text is light (e.g., #EFEFEF or white) for readability.

Recommended combinations

Minimalist Elegance

Ideal for a clean, modern website header, with the darkest gray for the logo and light gray for supporting text.

#EFEFEF · #5C5C5C · #3A3A3A

Layered Sophistication

Creates elegant content cards, using the darkest gray for key details and lighter shades for background.

#8C8C8C · #3A3A3A · #BDBDBD

Polished Contrast

Suitable for a sleek navigation bar, with the lightest grey as the base, charcoal for active states, and mid-grey for text.

#BDBDBD · #3A3A3A · #5C5C5C

CSS variables

:root {
  --art-deco-opal-1: #5C5C5C;
  --art-deco-opal-2: #8C8C8C;
  --art-deco-opal-3: #BDBDBD;
  --art-deco-opal-4: #EFEFEF;
  --art-deco-opal-5: #3A3A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-opal": {
        1: "#5C5C5C",
        2: "#8C8C8C",
        3: "#BDBDBD",
        4: "#EFEFEF",
        5: "#3A3A3A",
      }
    }
  }
}

Hex values

Color 1#5C5C5C

Color 2#8C8C8C

Color 3#BDBDBD

Color 4#EFEFEF

Color 5#3A3A3A

Accessibility

Contrast checker

2:1Fail

3.6:1AA18

5.8:1AA

1.7:1Fail

2:1Fail

1.8:1Fail

2.9:1Fail

3.4:1AA18

3.6:1AA18

1.8:1Fail

1.6:1Fail

6.1:1AA

5.8:1AA

2.9:1Fail

1.6:1Fail

9.9:1AAA

1.7:1Fail

3.4:1AA18

6.1:1AA

9.9:1AAA

Similar palettes

More like Art Deco Opal

View all neutral

Muted Art Deco

Parisian Cafe Charm

Antique Parchment Quill

Cashmere Cloud

Deco Glamour

Old World Parchment