Palette

Gatsby Emerald Glamour

Channels the sophisticated allure and opulent emerald hues of the Roaring Twenties' Art Deco era.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gatsby Emerald Glamour 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 Emerald Glamour.

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

Data visualization

#0f2c2f#2e4d4e#4d6e6f#6e9091#90b3b4

Palette guide

How to use Gatsby Emerald Glamour

Overview

The Gatsby Emerald Glamour palette channels the sophisticated allure and opulent emerald hues of the Roaring Twenties' Art Deco era. This luxurious collection features a gradient of deep, rich greens, from the almost black #0f2c2f and #2e4d4e, through the elegant mid-tones of #4d6e6f and #6e9091, to the lighter, yet still muted, #90b3b4. These colors work together to create a mood of refined elegance, mystery, and understated opulence, making the Gatsby Emerald Glamour palette ideal for designs that require a touch of vintage luxury, sophistication, or a dramatic, jewel-toned aesthetic. Designers can leverage its depth to convey exclusivity and timeless style.

Best used for

Art Deco themed event branding and decor
Luxury fashion or jewelry website design
High-end interior design concepts
Vintage cocktail bar or speakeasy branding
Elegant packaging for premium products
Sophisticated editorial layouts or book covers

Suggested color roles

primary

Utilize #0f2c2f as a dominant background to establish a deep, mysterious, and luxurious foundation.

secondary

Employ #4d6e6f for secondary sections, large headings, or UI elements, offering a rich mid-tone that retains elegance.

accent

Introduce #90b3b4 sparingly for subtle highlights, delicate patterns, or interactive elements, providing a gentle contrast.

background

#2e4d4e offers a deep, sophisticated background that allows lighter elements to truly pop, creating an exclusive feel.

text

For optimal readability, pair the darker emeralds with crisp white or a very light cream. For backgrounds like #90b3b4, use #0f2c2f for text.

Accessibility notes

The darker emeralds (#0f2c2f, #2e4d4e) provide excellent contrast with white or very light text, ensuring good readability.
When using mid-tones like #4d6e6f for text on backgrounds like #6e9091, ensure sufficient contrast for WCAG AA compliance.
White text on #0f2c2f or #2e4d4e will meet WCAG AA and AAA standards for most font sizes.
Avoid using #90b3b4 for small text on lighter backgrounds; reserve for larger headings or decorative purposes.

Recommended combinations

Deep Deco

Creates a profound, luxurious backdrop for Art Deco-inspired branding or elegant interfaces.

#0F2C2F · #4D6E6F · #90B3B4

Emerald Shimmer

Excellent for highlighting key information or calls-to-action with a sophisticated, jewel-toned impact.

#2E4D4E · #6E9091 · #4D6E6F

Gatsby Night

Suitable for dramatic headers or feature sections, offering a dynamic interplay of dark and lighter emeralds.

#0F2C2F · #6E9091 · #2E4D4E

CSS variables

:root {
  --gatsby-emerald-glamour-1: #0f2c2f;
  --gatsby-emerald-glamour-2: #2e4d4e;
  --gatsby-emerald-glamour-3: #4d6e6f;
  --gatsby-emerald-glamour-4: #6e9091;
  --gatsby-emerald-glamour-5: #90b3b4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gatsby-emerald-glamour": {
        1: "#0f2c2f",
        2: "#2e4d4e",
        3: "#4d6e6f",
        4: "#6e9091",
        5: "#90b3b4",
      }
    }
  }
}

Hex values

Color 1#0f2c2f

Color 2#2e4d4e

Color 3#4d6e6f

Color 4#6e9091

Color 5#90b3b4

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

4.3:1AA18

6.5:1AA

1.6:1Fail

1.7:1Fail

2.6:1Fail

4.1:1AA18

2.7:1Fail

1.7:1Fail

1.6:1Fail

2.5:1Fail

4.3:1AA18

2.6:1Fail

1.6:1Fail

1.5:1Fail

6.5:1AA

4.1:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Gatsby Emerald Glamour

Gatsby Emerald Glamour

See it in context.

Ready when you are.

Built with Gatsby Emerald Glamour.

How to use Gatsby Emerald Glamour

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Deco

Emerald Shimmer

Gatsby Night

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gatsby Emerald Glamour