Palette

Art Deco Gem

A refined palette echoing the elegance of the Art Deco era with muted gold, silver and deep blue.

elegantelegant5 colors

More elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F2F3B#A68E56#D8C79F#EBEBE0#6A7B8C

Palette guide

How to use Art Deco Gem

Overview

The Art Deco Gem palette is a refined collection echoing the elegance of the Art Deco era with muted gold, silver, and deep blue. Key colors include the deep navy #1F2F3B, the sophisticated muted gold #A68E56, and the airy off-white #EBEBE0. This collection is perfect for projects demanding a sense of historic glamour and polished sophistication. Developers can implement these balanced hues for structured UI and elegant digital environments. Designers will find this palette ideal for luxury brand identity, museum websites, or fine art galleries, ensuring a timeless appeal that speaks of understated grandeur and artistic finesse.

Best used for

Luxury brand identity
Museum and gallery websites
Fine art publications
Vintage-themed interiors
Sophisticated digital interfaces
High-end fashion editorials

Suggested color roles

primary

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

secondary

Utilize #6A7B8C for supporting content, sub-headings, or subtle backgrounds, offering a harmonious muted blue-grey.

accent

Incorporate #A68E56 for sophisticated highlights, decorative details, or a metallic sheen, adding warmth and luxury.

background

Apply #EBEBE0 as the primary background color, providing a clean, soft, and luxurious canvas that enhances readability.

text

For primary text on light backgrounds, #1F2F3B offers excellent contrast. For text on darker blues, use #EBEBE0 or white.

Accessibility notes

Ensure #1F2F3B has sufficient contrast for body text on #EBEBE0 to meet WCAG AA standards.
When using #A68E56 (muted gold) for text, ensure it is on a sufficiently dark background (e.g., #1F2F3B) to guarantee legibility.
Avoid using #6A7B8C for small text on #EBEBE0, 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 blue and lightest cream.

Recommended combinations

Refined Contrast

A light cream background with deep navy text and a muted gold accent for headings or key features, offering elegance and clarity.

#EBEBE0 · #1F2F3B · #A68E56

Blue & Gold Depth

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

#1F2F3B · #A68E56 · #6A7B8C

Subtle Shimmer

Mid-blue-grey as a background, with light cream text and a muted gold highlight for a sophisticated and balanced look.

#6A7B8C · #EBEBE0 · #A68E56

CSS variables

:root {
  --art-deco-gem-1: #1F2F3B;
  --art-deco-gem-2: #A68E56;
  --art-deco-gem-3: #D8C79F;
  --art-deco-gem-4: #EBEBE0;
  --art-deco-gem-5: #6A7B8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-gem": {
        1: "#1F2F3B",
        2: "#A68E56",
        3: "#D8C79F",
        4: "#EBEBE0",
        5: "#6A7B8C",
      }
    }
  }
}

Hex values

Color 1#1F2F3B

Color 2#A68E56

Color 3#D8C79F

Color 4#EBEBE0

Color 5#6A7B8C

Accessibility

Contrast checker

4.3:1AA18

8.2:1AAA

11.4:1AAA

3.2:1AA18

4.3:1AA18

1.9:1Fail

2.6:1Fail

1.4:1Fail

8.2:1AAA

1.9:1Fail

1.4:1Fail

2.6:1Fail

11.4:1AAA

2.6:1Fail

1.4:1Fail

3.6:1AA18

3.2:1AA18

1.4:1Fail

2.6:1Fail

3.6:1AA18

Similar palettes

More like Art Deco Gem

Art Deco Gem

See it in context.

Ready when you are.

Built with Art Deco Gem.

How to use Art Deco Gem

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Refined Contrast

Blue & Gold Depth

Subtle Shimmer

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Art Deco Gem