Palette

Roaring Twenties Chic

A sophisticated blend of muted golds and rich browns, capturing the opulent glamour of the 1920s Art Deco era.

Elegantelegant5 colors

More Elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Roaring Twenties Chic 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 Roaring Twenties Chic.

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

Data visualization

#B8860B#DAA520#FFD700#F0E68C#8B4513

Palette guide

How to use Roaring Twenties Chic

Overview

The Roaring Twenties Chic palette is a sophisticated blend of muted golds and rich browns, perfectly capturing the opulent glamour of the 1920s Art Deco era. Designers and developers can leverage this palette to evoke a sense of vintage luxury and timeless elegance. Key colors include the deep, refined #B8860B (Dark Goldenrod), the classic #FFD700 (Gold), and the grounding #8B4513 (Saddle Brown). This selection is ideal for projects requiring a touch of historical grandeur, offering a warm, inviting, yet undeniably upscale aesthetic. The lighter #F0E68C (Light Goldenrod Yellow) provides a soft contrast, ensuring versatility across various applications, from digital interfaces to physical products.

Best used for

Luxury brand identity and packaging
Vintage event invitations and decor
Upscale interior design concepts
Classic web themes and UI elements
Fashion and accessory branding
Art Deco inspired digital illustrations

Suggested color roles

primary

#B8860B - A sophisticated, deep goldenrod, ideal for main branding, prominent UI components, or elegant headers.

secondary

#DAA520 - A rich, warm goldenrod, perfect for complementary sections, subheadings, or decorative details.

accent

#FFD700 - A vibrant, opulent gold, best used sparingly for calls-to-action, icons, or intricate Art Deco patterns.

background

#F0E68C - A soft, light goldenrod yellow, providing a warm and inviting canvas that allows deeper tones to shine.

text

#8B4513 - A deep saddle brown, ensuring excellent readability for body text and headings on lighter backgrounds like #F0E68C.

Accessibility notes

Ensure #8B4513 text has sufficient contrast (WCAG AA or AAA) on #F0E68C and #DAA520 backgrounds.
Avoid using #F0E68C text on #DAA520 or #B8860B due to inherently low contrast, which will hinder readability.
For critical small text, use #8B4513 or a dark charcoal against lighter shades like #F0E68C and #FFD700.
Consider using larger font sizes for text elements colored with #DAA520 or #B8860B when on light backgrounds.

Recommended combinations

Deco Elegance

For high-impact headers, luxury branding, and sophisticated call-to-action elements.

#B8860B · #FFD700 · #8B4513

Vintage Glow

Creates a softer, inviting background with prominent features, ideal for editorial layouts.

#DAA520 · #F0E68C · #B8860B

Rich Contrast

For bold statements, headlines, and calls to action where strong visual separation is desired.

#8B4513 · #FFD700 · #DAA520

CSS variables

:root {
  --roaring-twenties-chic-1: #B8860B;
  --roaring-twenties-chic-2: #DAA520;
  --roaring-twenties-chic-3: #FFD700;
  --roaring-twenties-chic-4: #F0E68C;
  --roaring-twenties-chic-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "roaring-twenties-chic": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#FFD700",
        4: "#F0E68C",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#B8860B

Color 2#DAA520

Color 3#FFD700

Color 4#F0E68C

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

2.5:1Fail

2.2:1Fail

1.5:1Fail

1.6:1Fail

1.7:1Fail

3.2:1AA18

2.3:1Fail

1.6:1Fail

1.1:1Fail

5.1:1AA