Palette

Art Deco Glimmer

A sophisticated blend of muted golds and silvers, reflecting the geometric grandeur and luxurious feel of Art Deco design.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B8860B#DAA520#C0C0C0#A9A9A9#696969

Palette guide

How to use Art Deco Glimmer

Overview

The "Art Deco Glimmer" palette beautifully combines metallic golds and sophisticated grays, capturing the essence of Art Deco grandeur. This collection is highly versatile for designers aiming for an elegant, sleek, and slightly retro aesthetic. The shimmering golds, #B8860B and #DAA520, provide a luxurious focal point, while the range of grays from light #C0C0C0 to deep #696969 offers a strong, modern foundation. This palette is excellent for projects that need to convey opulence without being overly flashy, lending itself well to both digital and print applications requiring a touch of refined sparkle.

Best used for

Luxury product packaging
High-end jewelry website design
Event branding for galas or awards
Architectural rendering accents
Fashion editorial layouts
Vintage-inspired app interfaces

Suggested color roles

primary

Utilize #DAA520, a bright, inviting gold, for main headings, prominent buttons, or key navigational elements, conveying luxury.

secondary

Apply #A9A9A9, a sophisticated medium gray, for secondary text, borders, or background patterns, offering stable contrast.

accent

Employ #B8860B, a deeper, richer gold, for calls-to-action, interactive states, or small decorative flourishes that demand attention.

background

Select #C0C0C0, a light, neutral silver-gray, as a clean, modern base, allowing gold accents to shine and ensuring good readability.

text

Choose #696969, a dark, elegant gray, for body text and primary content, ensuring strong readability against lighter backgrounds.

Accessibility notes

Ensure #696969 text on #C0C0C0 background meets WCAG AA contrast standards for body text.
Avoid using #A9A9A9 text on #C0C0C0 as contrast will likely be too low.
Use #B8860B or #DAA520 for interactive elements but always check contrast against their background.
For critical information, pair #DAA520 with a dark background like black for maximum visibility.

Recommended combinations

Golden Highlight

Excellent for a clean header with a prominent gold logo and dark gray text.

#C0C0C0 · #DAA520 · #696969

Metallic Depth

Creates a sophisticated look for product descriptions or service blocks, with gold as a key detail.

#A9A9A9 · #B8860B · #696969

Sleek Contrast

Use for calls-to-action where gold is the button, light gray is the container, and dark gray is the text.

#DAA520 · #C0C0C0 · #696969

CSS variables

:root {
  --art-deco-glimmer-2-1: #B8860B;
  --art-deco-glimmer-2-2: #DAA520;
  --art-deco-glimmer-2-3: #C0C0C0;
  --art-deco-glimmer-2-4: #A9A9A9;
  --art-deco-glimmer-2-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-glimmer-2": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#C0C0C0",
        4: "#A9A9A9",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#B8860B

Color 2#DAA520

Color 3#C0C0C0

Color 4#A9A9A9

Color 5#696969

Accessibility

Contrast checker

1.5:1Fail

1.8:1Fail

1.4:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

2.5:1Fail

1.8:1Fail

1.2:1Fail

1.3:1Fail

3:1AA18