Palette

Emerald City Glaze

Opulent greens and a touch of gold inspire a feeling of Art Deco grandeur and elegance.

elegantelegant5 colors

More elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald City Glaze 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 Emerald City Glaze.

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

Data visualization

#FDFCDC#D7B95F#8CAE93#5C8C6B#2D4B3F

Palette guide

How to use Emerald City Glaze

Overview

The Emerald City Glaze palette (ID: emerald-city-glaze-2) presents a sophisticated blend of rich greens and a striking golden accent, evoking an Art Deco grandeur. Key colors include the deep, grounding #2D4B3F, a verdant #5C8C6B, and the softer sage of #8CAE93. The luminous #D7B95F provides a luxurious metallic touch, while #FDFCDC serves as a pristine, near-white base. This palette is exceptionally well-suited for projects aiming for a classic, opulent, and elegant aesthetic, from high-end corporate branding to stylish editorial layouts and refined digital interfaces that convey timeless luxury.

Best used for

Art Deco inspired branding and packaging
High-end luxury product websites
Editorial design for fashion or lifestyle magazines
Event branding for galas or upscale parties
Interior design concepts with a vintage elegant feel
Digital illustrations requiring a classic, rich aesthetic

Suggested color roles

primary

Utilize #2D4B3F for dominant structural elements, large text, or backgrounds to establish a strong, elegant foundation.

secondary

Employ #5C8C6B for supporting graphics, subheadings, or as a rich accent color in illustrations.

accent

Apply #D7B95F sparingly for highlights, icons, or call-to-action buttons to introduce a luxurious, eye-catching gleam.

background

Use #FDFCDC as a clean, soft background that provides contrast and allows the richer greens and gold to shine.

text

For body text, use a deep color like #2D4B3F or a dark charcoal. For headlines, #5C8C6B or #D7B95F (on dark backgrounds) works well.

Accessibility notes

Ensure #2D4B3F text on #FDFCDC meets WCAG contrast standards for readability.
Avoid using #D7B95F for small text on light backgrounds; it's best for accents or larger display text.
Pair #5C8C6B with #FDFCDC for good contrast in headings or important information.
The light #FDFCDC provides excellent contrast for all dark greens in the palette for accessible text.

Recommended combinations

Art Deco Elegance

Ideal for sophisticated branding, event invitations, or websites aiming for a luxurious, vintage-inspired aesthetic.

#2D4B3F · #D7B95F · #FDFCDC

Verdant Harmony

Excellent for creating natural, calming layouts or subtle gradients in UI elements and illustrations.

#5C8C6B · #8CAE93 · #FDFCDC

Golden Touch

Use for impactful headers, call-to-action sections, or decorative elements where a rich, opulent contrast is desired.

#2D4B3F · #5C8C6B · #D7B95F

CSS variables

:root {
  --emerald-city-glaze-2-1: #FDFCDC;
  --emerald-city-glaze-2-2: #D7B95F;
  --emerald-city-glaze-2-3: #8CAE93;
  --emerald-city-glaze-2-4: #5C8C6B;
  --emerald-city-glaze-2-5: #2D4B3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-city-glaze-2": {
        1: "#FDFCDC",
        2: "#D7B95F",
        3: "#8CAE93",
        4: "#5C8C6B",
        5: "#2D4B3F",
      }
    }
  }
}

Hex values

Color 1#FDFCDC

Color 2#D7B95F

Color 3#8CAE93

Color 4#5C8C6B

Color 5#2D4B3F

Accessibility

Contrast checker

1.8:1Fail

2.3:1Fail

3.7:1AA18

9.2:1AAA

1.8:1Fail

1.3:1Fail

2:1Fail

5:1AA

2.3:1Fail

1.3:1Fail

1.6:1Fail

3.9:1AA18

3.7:1AA18

2:1Fail

1.6:1Fail

2.5:1Fail

9.2:1AAA

5:1AA

3.9:1AA18

2.5:1Fail

Similar palettes

More like Emerald City Glaze