Palette

Emerald City Glamour

A luxurious mix of deep emerald and turquoise with crisp accents, inspired by a sparkling, mythical city.

CoolElegant5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#004B49#006D77#83C5BE#EDF6F9#FFDDD2

Palette guide

How to use Emerald City Glamour

Overview

The Emerald City Glamour palette offers a luxurious blend of deep, mystical greens and soft, inviting pastels, perfect for designs requiring an opulent yet approachable feel. Featuring the profound teal of #004B49, the vibrant turquoise of #006D77, and the serene aqua of #83C5BE, it's balanced by the almost-white #EDF6F9 and the warm peach of #FFDDD2. This combination is ideal for creating sophisticated digital interfaces, upscale branding, or elegant print materials. Designers can leverage its depth for impactful statements and its lighter tones for breathability, ensuring a harmonious and visually rich user experience across various platforms and applications.

Best used for

Luxury brand identity and packaging
High-end fashion editorial design
Elegant event invitations and decor
Sophisticated website and app UI/UX
Interior design mood boards for opulent spaces
Digital art and illustration with a fantasy theme

Suggested color roles

primary

Use #004B49 as a dominant brand color for headers, main navigation, or hero sections, conveying depth and luxury.

secondary

Apply #006D77 for subheadings, active states, or graphic elements to add a vibrant yet cohesive supporting tone.

accent

Employ #FFDDD2 sparingly for call-to-action buttons, interactive highlights, or delicate decorative accents to draw attention.

background

Utilize #EDF6F9 for clean, spacious backgrounds that allow other colors to pop while maintaining an airy feel.

text

For body text, use a dark charcoal like #333333 or the primary #004B49 for headlines to ensure strong readability on light backgrounds.

Accessibility notes

Ensure sufficient contrast when using #004B49 or #006D77 for text on #EDF6F9; check WCAG guidelines.
Avoid placing #FFDDD2 text on #EDF6F9, as contrast will be too low for readability.
Use #83C5BE for larger text or graphical elements against darker backgrounds to improve visibility.
Consider pairing #004B49 with #EDF6F9 for primary text/background for optimal legibility.

Recommended combinations

Deep Sophistication

Excellent for corporate websites or branding where a sense of established elegance and trustworthiness is paramount.

#004B49 · #006D77 · #EDF6F9

Soft Opulence

Ideal for softer UI elements, subtle gradients, or decorative patterns that require a gentle, inviting glow.

#83C5BE · #EDF6F9 · #FFDDD2

Glimmering Accent

Perfect for highlighting key information, call-to-action buttons, or accentuating design features in a luxurious context.

#004B49 · #FFDDD2 · #83C5BE

CSS variables

:root {
  --emerald-city-glamour-1: #004B49;
  --emerald-city-glamour-2: #006D77;
  --emerald-city-glamour-3: #83C5BE;
  --emerald-city-glamour-4: #EDF6F9;
  --emerald-city-glamour-5: #FFDDD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-city-glamour": {
        1: "#004B49",
        2: "#006D77",
        3: "#83C5BE",
        4: "#EDF6F9",
        5: "#FFDDD2",
      }
    }
  }
}

Hex values

Color 1#004B49

Color 2#006D77

Color 3#83C5BE

Color 4#EDF6F9

Color 5#FFDDD2

Accessibility

Contrast checker

1.6:1Fail

5.1:1AA

9.1:1AAA

7.9:1AAA

1.6:1Fail

3.1:1AA18

5.5:1AA

4.8:1AA

5.1:1AA

3.1:1AA18

1.8:1Fail

1.5:1Fail

9.1:1AAA

5.5:1AA

1.8:1Fail

1.2:1Fail

7.9:1AAA

4.8:1AA

1.5:1Fail

1.2:1Fail

Similar palettes

More like Emerald City Glamour

Verdigris Ceramic Haze

Amethyst Cavern Glow