Palette

Flapper Era Charm

Sophisticated blues, muted grays, and a touch of gold recall the glamorous and refined charm of the Roaring Twenties.

retroelegant5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Flapper Era 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 Flapper Era Charm.

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

Data visualization

#1F2F3D#5C6D7F#AFBFCF#C2B280#8B0000

Palette guide

How to use Flapper Era Charm

Overview

The 'Flapper Era Charm' palette recalls the glamorous and refined sophistication of the Roaring Twenties with a blend of deep blues, muted grays, and a touch of antique gold. The rich #1F2F3D provides a strong, elegant foundation, complemented by the versatile #5C6D7F and the airy #AFBFCF. A sophisticated touch of #C2B280 (antique gold) adds a luxurious accent, while the deep #8B0000 provides a surprising, dramatic contrast. Designers and developers will find this palette excellent for creating vintage-inspired websites, luxury branding, or editorial layouts that aim to evoke classic elegance, history, and a subtle sense of drama and allure.

Best used for

Vintage-inspired luxury branding
Historical society websites
Themed event invitations (1920s)
Art Deco interior design concepts
Classic film or theater promotions
High-end fashion editorial

Suggested color roles

primary

#1F2F3D - A deep, sophisticated blue-grey, perfect for main headings, navigation, or as a dominant background color to establish elegance.

secondary

#5C6D7F - A versatile mid-tone grey, ideal for subheadings, secondary content blocks, or subtle UI elements, providing depth.

accent

#C2B280 - An antique gold, excellent for delicate accents, borders, icons, or subtle highlights, adding a touch of luxury and warmth.

background

#AFBFCF - A very light, airy blue-grey background that offers a clean, sophisticated canvas, allowing darker elements to stand out.

text

#1F2F3D - Best for body text against lighter backgrounds like #AFBFCF, ensuring excellent readability and maintaining the palette's refined aesthetic.

Accessibility notes

Ensure #1F2F3D text on #AFBFCF background meets WCAG contrast standards for clear readability.
Use #C2B280 sparingly for text, and only against very dark backgrounds like #1F2F3D, to ensure sufficient contrast.
Be cautious when pairing #5C6D7F text on #AFBFCF, as contrast might be borderline for smaller text sizes.
The bold #8B0000 provides excellent contrast for accents but should be tested for text readability against different palette colors.

Recommended combinations

Roaring Elegance

For sophisticated headers or call-to-action sections, blending classic depth with luxurious accent.

#1F2F3D · #C2B280 · #AFBFCF

Vintage Night

Ideal for dramatic accents or feature blocks, creating a sense of mystery and historical richness.

#1F2F3D · #8B0000 · #5C6D7F

Subtle Glam

Effective for content cards or subtle UI elements, providing a light, elegant base with refined details.

#AFBFCF · #5C6D7F · #C2B280

CSS variables

:root {
  --flapper-era-charm-1: #1F2F3D;
  --flapper-era-charm-2: #5C6D7F;
  --flapper-era-charm-3: #AFBFCF;
  --flapper-era-charm-4: #C2B280;
  --flapper-era-charm-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "flapper-era-charm": {
        1: "#1F2F3D",
        2: "#5C6D7F",
        3: "#AFBFCF",
        4: "#C2B280",
        5: "#8B0000",
      }
    }
  }
}

Hex values

Color 1#1F2F3D

Color 2#5C6D7F

Color 3#AFBFCF

Color 4#C2B280

Color 5#8B0000

Accessibility

Contrast checker

2.6:1Fail

7.3:1AAA

6.5:1AA

1.4:1Fail

2.6:1Fail

2.8:1Fail

2.5:1Fail

1.9:1Fail

7.3:1AAA

2.8:1Fail

1.1:1Fail

5.3:1AA

6.5:1AA

2.5:1Fail

1.1:1Fail

4.8:1AA

1.4:1Fail

1.9:1Fail

5.3:1AA

4.8:1AA

Similar palettes

More like Flapper Era Charm

Roaring Twenties Chic

Art Deco Midnight

Art Deco Speakeasy