Palette

Jade Empress Jewel

Rich, opulent greens evoking the timeless beauty and mystique of an ancient jade gemstone.

monochromeelegant5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B4B3D#387766#5CA38F#8FCAA5#BDEBCD

Palette guide

How to use Jade Empress Jewel

Overview

The Jade Empress Jewel palette emanates rich, opulent greens, evoking the timeless beauty and mystique of an ancient jade gemstone. Ranging from the deep, grounding #1B4B3D to the soft, luminous #BDEBCD, this palette includes the sophisticated #387766, the balanced #5CA38F, and the refreshing #8FCAA5. Designers and developers can leverage these hues to craft elegant, sophisticated digital experiences, branding, or print materials that convey a sense of luxury, history, and natural preciousness. It's an excellent choice for projects requiring a refined, jewel-toned aesthetic, from high-end jewelry brands to cultural institutions and wellness applications.

Best used for

High-end jewelry brand identity
Museum and gallery websites
Luxury wellness product packaging
Elegant event branding
Historical art reproductions
Sophisticated interior accents

Suggested color roles

primary

Use #387766 for main interactive elements or brand highlights, offering a sophisticated and inviting presence.

secondary

Apply #5CA38F for supporting content, subheadings, or secondary buttons, providing soft harmony.

accent

Employ #1B4B3D sparingly for critical calls-to-action or powerful accents, grounding the design with deep elegance.

background

The softest #BDEBCD serves as a luminous background, creating a sense of preciousness and purity.

text

For body text, #1B4B3D offers excellent readability against lighter backgrounds, or use a deep charcoal.

Accessibility notes

Ensure #1B4B3D text on #BDEBCD background meets WCAG AA standards for general readability.
Verify contrast for #387766 and #5CA38F when used as text on the lightest background #BDEBCD.
Avoid using #8FCAA5 for small text; reserve it for larger titles or decorative elements due to its lightness.
For interactive elements, ensure distinct visual feedback for hover and focus states against the background.

Recommended combinations

Gemstone Glow

Ideal for soft, elegant backgrounds and subtle UI elements in luxury interfaces.

#BDEBCD · #8FCAA5 · #5CA38F

Jade Opulence

Excellent for sophisticated branding, creating strong visual hierarchy and regal appeal.

#1B4B3D · #387766 · #BDEBCD

Precious Depths

Effective for infographics or layered content, providing a harmonious and flowing feel.

#387766 · #5CA38F · #8FCAA5

CSS variables

:root {
  --jade-empress-jewel-1: #1B4B3D;
  --jade-empress-jewel-2: #387766;
  --jade-empress-jewel-3: #5CA38F;
  --jade-empress-jewel-4: #8FCAA5;
  --jade-empress-jewel-5: #BDEBCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-empress-jewel": {
        1: "#1B4B3D",
        2: "#387766",
        3: "#5CA38F",
        4: "#8FCAA5",
        5: "#BDEBCD",
      }
    }
  }
}

Hex values

Color 1#1B4B3D

Color 2#387766

Color 3#5CA38F

Color 4#8FCAA5

Color 5#BDEBCD

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

5.3:1AA

7.5:1AAA

1.9:1Fail

1.8:1Fail

2.8:1Fail

4:1AA18

3.3:1AA18

1.8:1Fail

1.6:1Fail

2.2:1Fail

5.3:1AA

2.8:1Fail

1.6:1Fail

1.4:1Fail

7.5:1AAA

4:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Jade Empress Jewel

Ancient Marble Column

Ancient Marble Statue

Ancient Marble Temple