Back to palettes

Palette

Emerald City Mosaic

Rich, jewel-toned greens inspired by a magical, gleaming city built of emeralds.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008000#006400#228B22#32CD32#7FFFD4

Palette guide

How to use Emerald City Mosaic

Overview

The Emerald City Mosaic palette is a rich and vibrant collection of jewel-toned greens, inspired by a magical city built of precious emeralds. It spans from the deep, classic emerald of #008000 and #006400, through the robust #228B22 and lively #32CD32, culminating in the dazzling aqua of #7FFFD4. This palette is exceptionally dynamic, perfect for designs that require a sense of fantasy, opulence, and playful energy. It's well-suited for branding, digital interfaces, and artistic projects where a strong visual impact and a harmonious blend of green hues are desired, creating a lively and engaging experience.

Best used for

  • Fantasy game branding and UI
  • Children's entertainment and educational apps
  • Jewelry brand marketing and packaging
  • Vibrant digital art and illustration
  • Event decor for festive or whimsical themes
  • Creative agency websites and portfolios

Suggested color roles

primary

Use #008000 or #006400 for dominant elements, headers, or backgrounds to establish a strong, classic emerald presence.

secondary

Employ #228B22 or #32CD32 for supporting graphics, subheadings, or interactive elements, adding vibrancy and depth.

accent

Apply #7FFFD4 for striking highlights, icons, or decorative patterns to introduce a dazzling, jewel-like sparkle.

background

A light neutral background (e.g., #F0FFF0) works well to let the greens shine, or use a deeper green like #006400 for dramatic effect.

text

For body text, a dark charcoal like #222222. For headlines on light backgrounds, #008000. Use white or #7FFFD4 for text on darker shades.

Accessibility notes

  • Ensure #008000 or #006400 text on light backgrounds (e.g., #F0FFF0) meets WCAG contrast standards.
  • Avoid using #7FFFD4 for small text on light backgrounds; it's best for accents or larger display text.
  • The lighter greens #32CD32 and #7FFFD4 may have low contrast when used together; separate them.
  • Pair #008000 with #7FFFD4 for a high-contrast, impactful combination for important information.

Recommended combinations

Emerald Depth

Ideal for creating a rich, profound base in branding, large graphic elements, or sophisticated backgrounds.

#008000 · #006400 · #228B22

Vibrant Sparkle

Perfect for energetic UI elements, interactive states, or illustrations that need to convey light and vibrancy.

#32CD32 · #7FFFD4 · #228B22

Mosaic Contrast

Use for impactful headers, call-to-action buttons, or decorative elements where a bold, playful contrast is desired.

#008000 · #7FFFD4 · #32CD32

CSS variables

:root {
  --emerald-city-mosaic-1: #008000;
  --emerald-city-mosaic-2: #006400;
  --emerald-city-mosaic-3: #228B22;
  --emerald-city-mosaic-4: #32CD32;
  --emerald-city-mosaic-5: #7FFFD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-city-mosaic": {
        1: "#008000",
        2: "#006400",
        3: "#228B22",
        4: "#32CD32",
        5: "#7FFFD4",
      }
    }
  }
}

Related searches

jewel tone green paletteemerald fantasy colorsvibrant green mosaicplayful emerald brandinggemstone color scheme

Palette colors

Hex values

Color 1#008000
·
Color 2#006400
·
Color 3#228B22
·
Color 4#32CD32
·
Color 5#7FFFD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.2:1Fail
2.4:1Fail
4.2:1AA18
2
1.4:1Fail
1.7:1Fail
3.5:1AA18
6.1:1AA
3
1.2:1Fail
1.7:1Fail
2.1:1Fail
3.6:1AA18
4
2.4:1Fail
3.5:1AA18
2.1:1Fail
1.7:1Fail
5
4.2:1AA18
6.1:1AA
3.6:1AA18
1.7:1Fail

Similar palettes

More like Emerald City Mosaic

View all vibrant
Dreamscape Aurora Flow
Enchanted Forest Glow
Forest Sprite Glow
Absinthe Spirit
Berry Patch Bliss
Carnival Lights