Back to palettes

Palette

Muted Art Deco

Sophisticated and subdued tones inspired by the elegant lines and subtle glamour 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 Muted Art Deco 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 Muted Art Deco.

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

Data visualization

#CBAE5A#5F9EA0#E0A79E#A1A1A1#6B7E6B

Palette guide

How to use Muted Art Deco

Overview

The Muted Art Deco palette offers a sophisticated blend of subdued tones, perfect for projects requiring a touch of vintage glamour. Featuring a luxurious muted gold (#CBAE5A), a dusty teal (#5F9EA0), and a soft blush (#E0A79E), it evokes the elegant lines and subtle opulence of the Art Deco era. Complementary neutral grey (#A1A1A1) and a deep forest green-grey (#6B7E6B) provide balance and depth. This collection is ideal for designers and developers aiming to create refined, upscale experiences with a nod to classic design principles, ensuring a timeless aesthetic.

Best used for

  • Luxury branding and packaging
  • Vintage-inspired web design
  • High-end interior design concepts
  • Sophisticated event invitations
  • Fashion and accessories editorials
  • Art and cultural institution branding

Suggested color roles

primary

Use #CBAE5A (muted gold) as a focal point for headlines or key UI elements, conveying luxury and importance.

secondary

Employ #5F9EA0 (dusty teal) for subheadings, navigation, or background accents to add a rich, supportive tone.

accent

Apply #E0A79E (blush pink) for delicate highlights, call-to-action buttons, or subtle decorative elements.

background

Utilize #A1A1A1 (neutral grey) as a clean, sophisticated base for content areas, offering excellent contrast.

text

Opt for #6B7E6B (dark green-grey) for body text and paragraphs, ensuring elegant readability against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter colors like #E0A79E or #A1A1A1.
  • Pair #CBAE5A with a very dark text color like #6B7E6B or black for optimal readability.
  • Avoid using #E0A79E directly on #A1A1A1 for small text; consider larger headlines or graphical elements.
  • The deep #6B7E6B offers strong contrast against #A1A1A1 and #E0A79E, making it a reliable choice for primary text.

Recommended combinations

Elegant Contrast

Ideal for luxurious headers or high-impact graphical elements where a strong, sophisticated contrast is desired.

#CBAE5A · #6B7E6B · #5F9EA0

Soft Glamour

Perfect for subtle background patterns, delicate UI components, or feminine branding accents.

#E0A79E · #A1A1A1 · #5F9EA0

Vintage Depth

Creates a rich, multi-layered look for hero sections, editorial layouts, or sophisticated data visualizations.

#5F9EA0 · #6B7E6B · #CBAE5A

CSS variables

:root {
  --muted-art-deco-1: #CBAE5A;
  --muted-art-deco-2: #5F9EA0;
  --muted-art-deco-3: #E0A79E;
  --muted-art-deco-4: #A1A1A1;
  --muted-art-deco-5: #6B7E6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-art-deco": {
        1: "#CBAE5A",
        2: "#5F9EA0",
        3: "#E0A79E",
        4: "#A1A1A1",
        5: "#6B7E6B",
      }
    }
  }
}

Related searches

muted art deco colorsvintage elegant palettesophisticated gold tealart deco web designsubtle glamour hues

Palette colors

Hex values

Color 1#CBAE5A
·
Color 2#5F9EA0
·
Color 3#E0A79E
·
Color 4#A1A1A1
·
Color 5#6B7E6B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1:1Fail
1.2:1Fail
2:1Fail
2
1.4:1Fail
1.5:1Fail
1.2:1Fail
1.4:1Fail
3
1:1Fail
1.5:1Fail
1.3:1Fail
2.1:1Fail
4
1.2:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
5
2:1Fail
1.4:1Fail
2.1:1Fail
1.7:1Fail

Similar palettes

More like Muted Art Deco

View all neutral