Palette

Art Deco Elegance

Sophisticated metallics and muted greys reflect the luxurious, geometric aesthetic of the Art Deco movement.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D9BF9C#B0A69D#6D6E73#4A4A4F#2C2D31

Palette guide

How to use Art Deco Elegance

Overview

The Art Deco Elegance (v3) palette features sophisticated metallics and muted greys, reflecting the luxurious, geometric aesthetic of the Art Deco movement. Key colors include the warm greige #D9BF9C, the deep grey #4A4A4F, and the darkest charcoal #2C2D31. This collection is perfect for projects aiming for a vintage yet modern sense of luxury and refinement. Developers can utilize its nuanced grey scale for structured UI and elegant transitions. Designers will find these hues ideal for high-end interior design, vintage fashion editorials, or architectural branding, ensuring a polished and timeless appeal with a hint of metallic shimmer.

Best used for

Luxury interior design
High-end fashion branding
Vintage-inspired publications
Architectural firm websites
Sophisticated digital interfaces
Museum exhibit design

Suggested color roles

primary

Establish #4A4A4F as the foundational color for strong statements, main text, or impactful graphical elements, providing a deep, elegant anchor.

secondary

Utilize #6D6E73 for supporting content, sub-headings, or subtle backgrounds, offering a harmonious mid-tone grey.

accent

Incorporate #D9BF9C for elegant highlights, decorative details, or a touch of metallic sheen, adding warmth and sophistication.

background

Apply #B0A69D as the primary background color, providing a soft, warm neutral canvas that enhances readability and overall elegance.

text

For optimal readability on light backgrounds, #2C2D31 offers excellent contrast. For text on darker greys, use #D9BF9C or white.

Accessibility notes

Ensure #2C2D31 has sufficient contrast for body text on #B0A69D to meet WCAG AA standards.
When using #D9BF9C for text, ensure it is on a sufficiently dark background (e.g., #4A4A4F) to guarantee legibility.
The subtle variations between greys (e.g., #6D6E73 and #4A4A4F) require careful contrast checking if used for small text.
For interactive elements, use distinct shifts in lightness or saturation to clearly indicate states, leveraging the darkest and lightest tones.

Recommended combinations

Refined Contrast

A light greige background with the darkest grey text and a warm metallic accent for headings or key features, offering elegance and clarity.

#B0A69D · #2C2D31 · #D9BF9C

Deep Glamour

Deep grey as a primary, muted gold as an elegant accent, and mid-grey for supporting elements, creating depth.

#4A4A4F · #D9BF9C · #6D6E73

Subtle Metallic

Use the darkest grey as a background, with a metallic gold highlight and light greige for secondary information, evoking luxury.

#2C2D31 · #D9BF9C · #B0A69D

CSS variables

:root {
  --art-deco-elegance-3-1: #D9BF9C;
  --art-deco-elegance-3-2: #B0A69D;
  --art-deco-elegance-3-3: #6D6E73;
  --art-deco-elegance-3-4: #4A4A4F;
  --art-deco-elegance-3-5: #2C2D31;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-elegance-3": {
        1: "#D9BF9C",
        2: "#B0A69D",
        3: "#6D6E73",
        4: "#4A4A4F",
        5: "#2C2D31",
      }
    }
  }
}

Hex values

Color 1#D9BF9C

Color 2#B0A69D

Color 3#6D6E73

Color 4#4A4A4F

Color 5#2C2D31

Accessibility

Contrast checker

1.4:1Fail

2.9:1Fail

5:1AA

7.8:1AAA

1.4:1Fail

2.1:1Fail

3.7:1AA18

5.8:1AA

2.9:1Fail

2.1:1Fail

1.7:1Fail

2.7:1Fail

5:1AA

3.7:1AA18

1.7:1Fail

1.6:1Fail

7.8:1AAA

5.8:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Art Deco Elegance

Ancient Calligraphy Ink