Back to palettes

Palette

Jade Jewel City

Sparkling shades of teal and green, like a utopian city built from glowing gemstones.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jade Jewel City 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 Jade Jewel City.

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

Data visualization

#00504D#007D7B#00B1AD#00E4E1#5DFFFF

Palette guide

How to use Jade Jewel City

Overview

The Jade Jewel City palette is a vibrant and energetic collection of sparkling teal and green shades, reminiscent of a utopian city built from glowing gemstones. From the deep, mysterious #00504D to the brilliant, almost electric #5DFFFF, this palette offers a striking progression of cool, luminous hues. The intermediate shades like #007D7B, #00B1AD, and #00E4E1 provide a dynamic range, perfect for conveying modernity, innovation, and vibrancy. This palette is ideal for designs seeking a futuristic, high-tech, or energetic aesthetic with a sophisticated, jewel-toned glow.

Best used for

  • Tech startup branding and UI
  • Futuristic concept art and game design
  • Modern architectural renderings
  • Digital art and creative portfolios
  • Innovative product launches
  • Event branding for dynamic conferences

Suggested color roles

primary

A deep, rich teal-green (#00504D), providing a sophisticated and grounding base for main headings, navigation, or branding.

secondary

A vibrant, energetic teal (#007D7B), excellent for subheadings, key information, or prominent call-to-action buttons.

accent

The brightest, most luminous color (#5DFFFF), perfect for drawing immediate attention to interactive elements, alerts, or striking visual highlights.

background

A balanced, bright teal (#00B1AD) that can serve as a captivating background, especially when contrasted with darker or lighter elements.

text

Use #00504D or a very dark charcoal for body text on light backgrounds (if applicable). Consider #5DFFFF or #00E4E1 for text on darker backgrounds.

Accessibility notes

  • For text on #00504D or #007D7B, use #5DFFFF or #00E4E1 to ensure sufficient contrast.
  • #00B1AD and #00E4E1 are quite bright; avoid using them for small text on very light backgrounds.
  • #5DFFFF has extremely high luminosity; use it sparingly for text and ensure it meets contrast standards, especially on mid-tone backgrounds.
  • Always test contrast ratios for all text sizes and interactive elements.

Recommended combinations

Cyber Glow

Creates a futuristic, high-tech feel with vibrant highlights, ideal for digital interfaces.

#00504D · #00E4E1 · #5DFFFF

Jewel Depth

A harmonious blend of rich and bright teals, perfect for sophisticated branding or data visualization.

#007D7B · #00B1AD · #00504D

Energetic Accent

A strong dark base with an intense, luminous accent, excellent for drawing attention to key features.

#00504D · #5DFFFF · #007D7B

CSS variables

:root {
  --jade-jewel-city-1: #00504D;
  --jade-jewel-city-2: #007D7B;
  --jade-jewel-city-3: #00B1AD;
  --jade-jewel-city-4: #00E4E1;
  --jade-jewel-city-5: #5DFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-jewel-city": {
        1: "#00504D",
        2: "#007D7B",
        3: "#00B1AD",
        4: "#00E4E1",
        5: "#5DFFFF",
      }
    }
  }
}

Related searches

teal and green palettevibrant jewel tonesfuturistic color schememodern teal green UIglowing gemstone colors

Palette colors

Hex values

Color 1#00504D
·
Color 2#007D7B
·
Color 3#00B1AD
·
Color 4#00E4E1
·
Color 5#5DFFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.5:1AA18
5.8:1AA
7.6:1AAA
2
1.9:1Fail
1.9:1Fail
3.1:1AA18
4.1:1AA18
3
3.5:1AA18
1.9:1Fail
1.7:1Fail
2.2:1Fail
4
5.8:1AA
3.1:1AA18
1.7:1Fail
1.3:1Fail
5
7.6:1AAA
4.1:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Jade Jewel City

View all cool
Aurora Borealis Dream
Emerald Coast Dive
Polar Light Shimmer
Teal Wave Current
Tropical Reef Vista
Aegean Blue Depths