Back to palettes

Palette

Emerald City Gleam

The legendary brilliance of a magical city, sparkling with rich jewels and architectural grandeur.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#20B2AA#DAA520#48D1CC#000080

Palette guide

How to use Emerald City Gleam

Overview

The Emerald City Gleam palette (ID: emerald-city-gleam) radiates with the brilliant, jewel-toned hues of a magical metropolis. It features the rich teal of #008080, the slightly lighter #20B2AA, and the vivid #48D1CC, creating a dynamic aquatic green spectrum. A striking #DAA520 gold provides a luxurious counterpoint, while the deep #000080 navy offers a sophisticated anchor. This palette is perfect for designs that aim to be both vibrant and elegant, suitable for web applications, brand identities, and visual content that seeks to evoke a sense of fantasy, magic, and polished grandeur with a unique color blend.

Best used for

  • Fantasy game interfaces and branding
  • Luxury event invitations and decor
  • High-tech or futuristic brand identities
  • Digital art and illustration with magical themes
  • Editorial design for upscale lifestyle content
  • Interactive web experiences and mobile apps

Suggested color roles

primary

Use #008080 as a dominant color for backgrounds, large graphical elements, or primary branding to establish elegance.

secondary

Employ #20B2AA or #48D1CC for supporting sections, subheadings, or interactive states, adding vibrancy.

accent

Apply #DAA520 for striking call-to-action buttons, icons, or important highlights to draw immediate attention.

background

A light neutral (e.g., a very light grey) can be used, or #000080 for a dramatic, deep background that allows other colors to shine.

text

For body text, use a dark charcoal. For headlines on lighter backgrounds, #008080 works well. Use white or #DAA520 for text on #000080.

Accessibility notes

  • Ensure sufficient contrast when using #008080 or #20B2AA for text on light backgrounds.
  • Text in #DAA520 needs a dark background (like #000080) to be legible; avoid on light colors.
  • The lighter teal #48D1CC may need to be used with a darker font for good contrast.
  • Pair #000080 with #DAA520 for highly visible accents and text on a dark base.

Recommended combinations

Mystical Glow

Ideal for creating a luxurious and mysterious atmosphere in branding, high-end websites, or game interfaces.

#008080 · #DAA520 · #000080

Aqua Radiance

Perfect for vibrant UI elements, illustrations, or gradients that need to convey lightness and shimmer.

#20B2AA · #48D1CC · #DAA520

Deep Elegance

Use for sophisticated backgrounds, navigation bars, or data visualizations where depth and clarity are key.

#000080 · #008080 · #48D1CC

CSS variables

:root {
  --emerald-city-gleam-1: #008080;
  --emerald-city-gleam-2: #20B2AA;
  --emerald-city-gleam-3: #DAA520;
  --emerald-city-gleam-4: #48D1CC;
  --emerald-city-gleam-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-city-gleam": {
        1: "#008080",
        2: "#20B2AA",
        3: "#DAA520",
        4: "#48D1CC",
        5: "#000080",
      }
    }
  }
}

Related searches

teal gold navy palettejewel tone fantasy colorselegant vibrant greenmagical city color schemeaqua gold branding

Palette colors

Hex values

Color 1#008080
·
Color 2#20B2AA
·
Color 3#DAA520
·
Color 4#48D1CC
·
Color 5#000080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.1:1Fail
2.6:1Fail
3.4:1AA18
2
1.8:1Fail
1.2:1Fail
1.4:1Fail
6.1:1AA
3
2.1:1Fail
1.2:1Fail
1.2:1Fail
7.2:1AAA
4
2.6:1Fail
1.4:1Fail
1.2:1Fail
8.6:1AAA
5
3.4:1AA18
6.1:1AA
7.2:1AAA
8.6:1AAA

Similar palettes

More like Emerald City Gleam

View all vibrant
Emerald City Glaze
Regal Emerald Bloom
Art Deco Emerald Pool
Aurora Borealis Dream
Cosmic Iridescent Shine
Emerald City Gleam