Palette

Art Deco Glamour

Sophisticated neutrals with subtle warmth, recalling the elegance of 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 Glamour 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 Glamour.

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

Data visualization

#F4EBD0#C7B299#8B7F6E#5A4E47#3B3530

Palette guide

How to use Art Deco Glamour

Overview

The Art Deco Glamour (v3) palette presents sophisticated neutrals with subtle warmth, recalling the elegance of the Art Deco era. Key colors include the light cream #F4EBD0, the warm beige #C7B299, and the deep brown-grey #3B3530. This collection is perfect for projects demanding a luxurious, vintage, and understated aesthetic. Developers can implement these harmonious hues for gentle UI transitions and refined digital experiences. Designers will find this palette ideal for luxury interior design, vintage fashion, or high-end cosmetics, ensuring a polished and timeless appeal that speaks of quiet grandeur and artistic finesse.

Best used for

Luxury interior design
Vintage fashion lines
High-end cosmetic branding
Antique restoration marketing
Sophisticated branding
Classic print materials

Suggested color roles

primary

Establish #5A4E47 as the foundational color for strong statements, main text, or impactful graphical elements, providing a deep, grounding anchor.

secondary

Utilize #8B7F6E for supporting content, sub-headings, or backgrounds for depth, offering a rich mid-brown-grey.

accent

Incorporate #C7B299 for subtle highlights, decorative details, or a touch of soft luxury, adding warmth and sophistication.

background

Apply #F4EBD0 as the primary background color, providing a warm, inviting, and clean canvas that enhances readability.

text

For primary text on light backgrounds, #3B3530 offers excellent contrast. For text on darker backgrounds, use #F4EBD0 or white.

Accessibility notes

Ensure #3B3530 has sufficient contrast for body text on #F4EBD0 to meet WCAG AA standards.
The subtle variations between the mid-tones require careful contrast checking if used for small text or critical information.
Avoid using #C7B299 for small text on #F4EBD0, as the contrast might be insufficient for some users.
For interactive elements, use distinct shifts in lightness or saturation to clearly indicate states, leveraging the darkest and lightest tones.

Recommended combinations

Warm Neutral

A light cream background with the darkest brown-grey text and a warm beige accent for headings or key features, offering elegance and clarity.

#F4EBD0 · #3B3530 · #C7B299

Depth & Glamour

Deep brown-grey as a primary, warm beige as an elegant accent, and mid-brown-grey for supporting elements, creating depth.

#5A4E47 · #C7B299 · #8B7F6E

Vintage Tone

Darkest brown-grey as a background, with light cream text and a warm beige highlight for a sophisticated and balanced look.

#3B3530 · #F4EBD0 · #C7B299

CSS variables

:root {
  --art-deco-glamour-3-1: #F4EBD0;
  --art-deco-glamour-3-2: #C7B299;
  --art-deco-glamour-3-3: #8B7F6E;
  --art-deco-glamour-3-4: #5A4E47;
  --art-deco-glamour-3-5: #3B3530;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-glamour-3": {
        1: "#F4EBD0",
        2: "#C7B299",
        3: "#8B7F6E",
        4: "#5A4E47",
        5: "#3B3530",
      }
    }
  }
}

Hex values

Color 1#F4EBD0

Color 2#C7B299

Color 3#8B7F6E

Color 4#5A4E47

Color 5#3B3530

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

6.7:1AA

10.2:1AAA

1.7:1Fail

1.9:1Fail

3.9:1AA18

5.9:1AA

3.3:1AA18

1.9:1Fail

2:1Fail

3.1:1AA18