Palette

Gatsby Era Shimmer

Dark, moody blues contrasted with dazzling golds, reflecting the opulent yet mysterious allure of the Jazz Age.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4682B4#FFD700#FFFFF0#F0F8FF

Palette guide

How to use Gatsby Era Shimmer

Overview

The Gatsby Era Shimmer palette features dark, moody blues contrasted with dazzling golds, reflecting the opulent yet mysterious allure of the Jazz Age. This elegant collection includes a deep teal-grey, #2F4F4F, a classic steel blue, #4682B4, a brilliant pure gold, #FFD700, a creamy near-white, #FFFFF0, and a soft pale blue, #F0F8FF. These colors work together to create a mood of sophisticated mystery, vintage glamour, and understated luxury, making the Gatsby Era Shimmer palette ideal for designs that aim to convey intrigue, prestige, or a classic, refined aesthetic. Designers can leverage its cool-warm contrast for captivating and memorable visuals.

Best used for

Luxury brand identity and high-end advertising
Art Deco themed event invitations and decor
Mystery novel covers or film noir inspired designs
Elegant fashion and jewelry website design
Sophisticated website headers and UI elements
Vintage cocktail bar or speakeasy branding

Suggested color roles

primary

Utilize #2F4F4F as a dominant background to establish a deep, mysterious, and sophisticated foundation for lighter accents.

secondary

Employ #4682B4 for secondary sections, large headings, or UI elements, offering a classic blue that complements the gold.

accent

Introduce #FFD700 generously for dazzling highlights, metallic accents, or important calls-to-action that demand attention.

background

#FFFFF0 provides a warm, creamy near-white background, excellent for showcasing darker elements or ensuring readability.

text

For text against #2F4F4F or #4682B4, use #FFFFF0 or #FFD700 for crisp readability. Against #FFFFF0, use #2F4F4F or black for body text.

Accessibility notes

Pairing #FFFFF0 or #FFD700 with #2F4F4F or #4682B4 provides excellent WCAG AA contrast for text, ensuring strong readability.
The bright gold #FFD700 may not have sufficient contrast with #FFFFF0 or #F0F8FF for small text; use it for larger headings.
Ensure interactive elements using gold accents have a clear hover state or sufficient border contrast against their background.
When using #4682B4 for text, ensure the background is either very dark (like #2F4F4F) or very light (like #FFFFF0) for readability.

Recommended combinations

Jazz Night

Creates a dramatic, opulent contrast for luxury branding, event posters, or bold website sections.

#2F4F4F · #FFD700 · #4682B4

Glamourous Mist

Excellent for conveying a delicate yet sophisticated mood in background patterns or subtle UI elements.

#F0F8FF · #FFFFF0 · #4682B4

Art Deco Glow

Suitable for creating elegant headers or UI elements that pop with Art Deco flair and strong contrast.

#2F4F4F · #FFFFF0 · #FFD700

CSS variables

:root {
  --gatsby-era-shimmer-1: #2F4F4F;
  --gatsby-era-shimmer-2: #4682B4;
  --gatsby-era-shimmer-3: #FFD700;
  --gatsby-era-shimmer-4: #FFFFF0;
  --gatsby-era-shimmer-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gatsby-era-shimmer": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#FFD700",
        4: "#FFFFF0",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4682B4

Color 3#FFD700

Color 4#FFFFF0

Color 5#F0F8FF

Accessibility

Contrast checker

2.2:1Fail

6.4:1AA

8.8:1AAA

8.3:1AAA

2.2:1Fail

2.9:1Fail

4.1:1AA18

3.8:1AA18

6.4:1AA

2.9:1Fail

1.4:1Fail

1.3:1Fail

8.8:1AAA

4.1:1AA18

1.4:1Fail

1.1:1Fail

8.3:1AAA

3.8:1AA18

1.3:1Fail

1.1:1Fail

Similar palettes

More like Gatsby Era Shimmer

Art Nouveau Gilt Flower

Coronation Gemstone Gleam

Deco Sapphire Gleam