Palette

Gatsby Night Glam

Reflects the opulence and geometric style of the roaring twenties, with deep, muted tones.

DarkElegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gatsby Night Glam 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 Night Glam.

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

Data visualization

#2F3E46#84A98C#E6EAD2#4F777B#C7B198

Palette guide

How to use Gatsby Night Glam

Overview

The Gatsby Night Glam palette captures the opulent and geometric style of the Roaring Twenties with its deep, muted tones and a touch of vintage gold. Featuring a grounding #2F3E46, serene #84A98C, and a warm #E6EAD2, it builds a sophisticated base. The addition of a deep teal #4F777B and a soft, earthy #C7B198 provides rich texture and depth. This palette is perfect for designers and developers aiming to create an atmosphere of understated luxury, historical elegance, and a warm, inviting sophistication, ideal for projects that blend classic charm with a contemporary muted aesthetic.

Best used for

Vintage luxury branding
Art Deco inspired web interfaces
High-end fashion or interior design showcases
Elegant event branding
Sophisticated editorial layouts
Museum or historical society digital presence

Suggested color roles

primary

Use #2F3E46 as a deep, foundational color for backgrounds or main structural elements, providing a strong, elegant anchor.

secondary

Apply #4F777B for secondary sections, large text blocks, or card backgrounds, offering a rich, muted contrast.

accent

Reserve #C7B198 for subtle highlights, interactive elements, or decorative details to bring warmth and a vintage touch.

background

A lighter shade like #E6EAD2 can serve as a soft, warm background, or use #2F3E46 for a more dramatic, elegant setting.

text

For dark backgrounds, #E6EAD2 provides excellent readability. For lighter backgrounds, #2F3E46 or a dark charcoal works best.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using mid-tones like #84A98C on #E6EAD2.
Avoid using #C7B198 for small text on #E6EAD2, as contrast may be too low for accessibility.
Test readability of #2F3E46 text on #E6EAD2 backgrounds for WCAG AA compliance.
Consider larger font sizes or bolding for text using #84A98C to improve readability.

Recommended combinations

Muted Grandeur

Ideal for elegant headers: #2F3E46 background, #C7B198 for the main title, and #E6EAD2 for a subtle tagline.

#2F3E46 · #C7B198 · #E6EAD2

Sophisticated Earth

Perfect for clean content blocks: #E6EAD2 as background, #4F777B for body text, and #84A98C for links or subtle accents.

#E6EAD2 · #4F777B · #84A98C

Teal & Gold Depth

Use #4F777B for card backgrounds, #C7B198 for highlighted text or buttons, and #2F3E46 for borders or icons.

#4F777B · #C7B198 · #2F3E46

CSS variables

:root {
  --gatsby-night-glam-1: #2F3E46;
  --gatsby-night-glam-2: #84A98C;
  --gatsby-night-glam-3: #E6EAD2;
  --gatsby-night-glam-4: #4F777B;
  --gatsby-night-glam-5: #C7B198;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gatsby-night-glam": {
        1: "#2F3E46",
        2: "#84A98C",
        3: "#E6EAD2",
        4: "#4F777B",
        5: "#C7B198",
      }
    }
  }
}

Hex values

Color 1#2F3E46

Color 2#84A98C

Color 3#E6EAD2

Color 4#4F777B

Color 5#C7B198

Accessibility

Contrast checker

4.2:1AA18

9:1AAA

2.2:1Fail

5.4:1AA

4.2:1AA18

2.1:1Fail

1.9:1Fail

1.3:1Fail

9:1AAA

2.1:1Fail

4:1AA18

1.7:1Fail

2.2:1Fail

1.9:1Fail

4:1AA18

2.4:1Fail

5.4:1AA

1.3:1Fail

1.7:1Fail

2.4:1Fail

Similar palettes

More like Gatsby Night Glam

View all Dark

Art Deco Bronze

Baroque Night Grandeur

Gatsby Glam Evening

Deep Cave Emeralds

Gilded Renaissance Flair

Imperial Gemstone Array