Palette

Art Deco Charm

A sophisticated blend of grays and gilded golds, reminiscent of 1920s Art Deco elegance.

retroelegant5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B4B4B#7F7F7F#B39E60#DCC986#F2E8BB

Palette guide

How to use Art Deco Charm

Overview

The Art Deco Charm palette (v2) offers a sophisticated blend of grays and gilded golds, perfectly reminiscent of 1920s Art Deco elegance. Featuring the strong charcoal #4B4B4B, the radiant muted gold #B39E60, and the soft, creamy off-white #F2E8BB, this collection is ideal for designs seeking a vintage yet luxurious aesthetic. Developers can implement these hues for elegant UI frameworks and refined digital experiences. Designers will find this palette perfect for creating high-end branding, classic event materials, or upscale interior concepts, evoking a timeless sense of glamour and polished sophistication.

Best used for

Luxury branding and packaging
Vintage event design and invitations
Upscale real estate marketing
Financial services websites
Classic website themes
Interior design for elegant spaces

Suggested color roles

primary

Designate #4B4B4B as the foundational color for strong statements, main text, or impactful graphical elements, providing a sophisticated anchor.

secondary

Utilize #B39E60 for elegant accents, headers, or key interactive elements, infusing a sense of muted luxury and warmth.

accent

Incorporate #DCC986 for subtle highlights, metadata, or delicate metallic sheen, adding a lighter touch of gold.

background

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

text

For primary text on light backgrounds, #4B4B4B offers excellent contrast and maintains the palette's sophisticated feel. Use white on dark elements.

Accessibility notes

Ensure #4B4B4B has sufficient contrast for body text on #F2E8BB to meet WCAG AA standards.
Gold shades like #B39E60 and #DCC986 should be used carefully for text, ensuring legibility against their background, especially for small font sizes.
When designing interactive elements, ensure distinct contrast between states (e.g., hover, active) using the various grey and gold tones.
Consider using #7F7F7F as a lighter text color on darker backgrounds, or for secondary information where high contrast isn't paramount.

Recommended combinations

Gilded Contrast

A warm, light background with strong, dark text and a rich gold accent for headings or call-to-action buttons.

#F2E8BB · #4B4B4B · #B39E60

Charcoal Gold

Use the dark charcoal as a primary, bright gold as a striking accent, and mid-grey for supporting details or subtle backgrounds.

#4B4B4B · #DCC986 · #7F7F7F

Soft Glam

Feature muted gold as a primary color, complemented by a light background and dark text for a balanced and elegant presentation.

#B39E60 · #F2E8BB · #4B4B4B

CSS variables

:root {
  --art-deco-charm-2-1: #4B4B4B;
  --art-deco-charm-2-2: #7F7F7F;
  --art-deco-charm-2-3: #B39E60;
  --art-deco-charm-2-4: #DCC986;
  --art-deco-charm-2-5: #F2E8BB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-charm-2": {
        1: "#4B4B4B",
        2: "#7F7F7F",
        3: "#B39E60",
        4: "#DCC986",
        5: "#F2E8BB",
      }
    }
  }
}

Hex values

Color 1#4B4B4B

Color 2#7F7F7F

Color 3#B39E60

Color 4#DCC986

Color 5#F2E8BB

Accessibility

Contrast checker

2.2:1Fail

3.3:1AA18

5.3:1AA

7.1:1AAA

2.2:1Fail

1.5:1Fail

2.4:1Fail

3.2:1AA18

3.3:1AA18

1.5:1Fail

1.6:1Fail

2.1:1Fail

5.3:1AA

2.4:1Fail

1.6:1Fail

1.3:1Fail

7.1:1AAA

3.2:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Art Deco Charm

Ancient Marble Column

Ancient Marble Ruins