Palette

Gatsby Era Elegance

A sophisticated and opulent palette reminiscent of the luxurious and geometric style of the Roaring Twenties.

elegantelegant5 colors

More elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gatsby Era Elegance 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 Gatsby Era Elegance.

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

Data visualization

#2F4F4F#8B7355#D4AF37#FFFAEE#696969

Palette guide

How to use Gatsby Era Elegance

Overview

The Gatsby Era Elegance palette is a sophisticated and opulent collection reminiscent of the luxurious and geometric style of the Roaring Twenties. This palette features a deep teal-grey, #2F4F4F, a warm antique gold, #8B7355, a dazzling bright gold, #D4AF37, a creamy near-white, #FFFAEE, and a classic charcoal grey, #696969. These colors work together to create a mood of refined glamour, vintage luxury, and timeless sophistication, making the Gatsby Era Elegance palette ideal for designs that aim to convey a sense of history, prestige, or a classic, high-society aesthetic. Designers can leverage its rich contrasts for impactful and memorable visuals.

Best used for

Luxury brand identity and packaging
Art Deco interior design concepts
High-end fashion editorial layouts
Vintage wedding stationery and decor
Museum or gallery exhibition branding
Sophisticated event invitations

Suggested color roles

primary

Utilize #2F4F4F as a dominant background to establish a deep, sophisticated, and grounding foundation.

secondary

Employ #696969 for secondary sections or large text blocks, offering a versatile neutral that complements the richer tones.

accent

Introduce #D4AF37 or #8B7355 sparingly for dazzling highlights, metallic accents, or important calls-to-action.

background

#FFFAEE provides a warm, creamy near-white background, perfect for showcasing the darker, richer colors and ensuring readability.

text

For text against #2F4F4F or #696969, use #FFFAEE or #D4AF37 for headings. Against #FFFAEE, use #2F4F4F or black for body text.

Accessibility notes

Pairing #FFFAEE with #2F4F4F or #696969 for text ensures excellent WCAG AA contrast for readability.
The bright gold #D4AF37 may not have sufficient contrast with #FFFAEE for small text; use it for larger headings or decorative elements.
Ensure interactive elements using gold accents have a clear hover state or sufficient border contrast.
When using #8B7355 for text, ensure the background is either very dark (like #2F4F4F) or very light (like #FFFAEE).

Recommended combinations

Golden Age

Creates a striking, opulent contrast for luxury branding or bold headers.

#2F4F4F · #D4AF37 · #FFFAEE

Refined Retro

Excellent for conveying vintage charm and sophistication in editorial or website design.

#696969 · #8B7355 · #FFFAEE

Deco Drama

Suitable for creating deep, luxurious backgrounds with metallic accents for high-impact visuals.

#2F4F4F · #8B7355 · #D4AF37

CSS variables

:root {
  --gatsby-era-elegance-1: #2F4F4F;
  --gatsby-era-elegance-2: #8B7355;
  --gatsby-era-elegance-3: #D4AF37;
  --gatsby-era-elegance-4: #FFFAEE;
  --gatsby-era-elegance-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gatsby-era-elegance": {
        1: "#2F4F4F",
        2: "#8B7355",
        3: "#D4AF37",
        4: "#FFFAEE",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#8B7355

Color 3#D4AF37

Color 4#FFFAEE

Color 5#696969

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

8.6:1AAA

1.6:1Fail

2:1Fail

2.1:1Fail

4.3:1AA18

1.2:1Fail

4.2:1AA18

2.1:1Fail

2:1Fail

2.6:1Fail

8.6:1AAA

4.3:1AA18

2:1Fail

5.3:1AA

1.6:1Fail

1.2:1Fail

2.6:1Fail

5.3:1AA

Similar palettes

More like Gatsby Era Elegance

Gatsby Era Elegance

See it in context.

Ready when you are.

Built with Gatsby Era Elegance.

How to use Gatsby Era Elegance

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Golden Age

Refined Retro

Deco Drama

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gatsby Era Elegance