Palette

Gatsby Night Lux

A sophisticated palette blending deep, rich tones with shimmering golds and cool blues of the Art Deco era.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#C78C1B#EBC88C#A7D7E0#F0F8FF

Palette guide

How to use Gatsby Night Lux

Overview

The Gatsby Night Lux palette epitomizes Art Deco opulence, blending deep, rich tones with shimmering golds and cool, ethereal blues. The profound #36454F provides a strong, sophisticated foundation, while the vibrant #C78C1B and softer #EBC88C introduce luxurious golden accents. A serene #A7D7E0 and pristine #F0F8FF offer refreshing contrasts, reminiscent of moonlight on a grand gala. This palette is ideal for designers and developers crafting projects that demand a sense of timeless elegance, refined extravagance, and a harmonious balance between dramatic depth and luminous highlights, perfect for high-end branding or editorial work.

Best used for

Luxury event branding and websites
Art Deco inspired interiors and digital art
High-end fashion or jewelry e-commerce
Sophisticated app and UI design
Editorial layouts for upscale publications
Vintage-themed brand identity

Suggested color roles

primary

Utilize #36454F as a dominant, deep background or for primary structural elements, establishing a luxurious, stable foundation.

secondary

Apply #A7D7E0 for secondary content areas, large text blocks, or card backgrounds, offering a serene, elegant contrast.

accent

Reserve #C78C1B for high-impact elements like call-to-action buttons, key headlines, or decorative flourishes to signify luxury and importance.

background

A deep #36454F provides a dramatic, elegant backdrop, while #F0F8FF offers a clean, airy base that allows other colors to shine.

text

For dark backgrounds, #F0F8FF or #EBC88C provides excellent readability. For light backgrounds, #36454F or a dark charcoal works best.

Accessibility notes

Ensure high contrast for text on backgrounds; #F0F8FF on #36454F is strong, but #A7D7E0 on #EBC88C might be insufficient.
Avoid using #EBC88C for small text on white or very light backgrounds due to potential low contrast.
Test readability of #C78C1B on various backgrounds, especially against #A7D7E0, for WCAG AA compliance.
For backgrounds using #F0F8FF, ensure text is a dark, contrasting color such as black or #36454F.

Recommended combinations

Gatsby Gala

Ideal for hero sections: #36454F background, #C78C1B for main headlines, and #F0F8FF for body text or subheadings.

#36454F · #C78C1B · #F0F8FF

Moonlit Charm

Perfect for clean content blocks: #A7D7E0 as background, #36454F for body text, and #EBC88C for subtle decorative accents or links.

#A7D7E0 · #36454F · #EBC88C

Opulent Contrast

Use #EBC88C for card backgrounds, #36454F for text within, and #C78C1B for a strong border or interactive button.

#EBC88C · #36454F · #C78C1B

CSS variables

:root {
  --gatsby-night-lux-1: #36454F;
  --gatsby-night-lux-2: #C78C1B;
  --gatsby-night-lux-3: #EBC88C;
  --gatsby-night-lux-4: #A7D7E0;
  --gatsby-night-lux-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gatsby-night-lux": {
        1: "#36454F",
        2: "#C78C1B",
        3: "#EBC88C",
        4: "#A7D7E0",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#C78C1B

Color 3#EBC88C

Color 4#A7D7E0

Color 5#F0F8FF

Accessibility

Contrast checker

3.4:1AA18

6.2:1AA

6.3:1AA

9.2:1AAA

3.4:1AA18

1.8:1Fail

1.9:1Fail

2.7:1Fail

6.2:1AA

1.8:1Fail

1:1Fail

1.5:1Fail

6.3:1AA

1.9:1Fail

1:1Fail

1.5:1Fail

9.2:1AAA

2.7:1Fail

1.5:1Fail

Similar palettes

More like Gatsby Night Lux

Gatsby Night Lux

See it in context.

Ready when you are.

Built with Gatsby Night Lux.

How to use Gatsby Night Lux

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Gatsby Gala

Moonlit Charm

Opulent Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gatsby Night Lux