Jewel Tone Color Palette: 6 Rich Schemes with Hex Codes

Jewel tones are the color world's answer to luxury fabric and precious stones — deep, saturated hues named for the gems they resemble: emerald green, sapphire blue, ruby red, amethyst purple. A jewel tone color palette feels opulent and dramatic, making it a favorite for premium branding, moody interiors and bold digital design.

Here are six jewel tone palettes with hex codes and copy-paste CSS. They pair naturally with the gold color palette guide, or browse the full PaletteCSS library.

What makes a color a "jewel tone"?

Jewel tones share two traits: high saturation and medium-to-dark lightness. They are vivid but never pastel, and rich but never muddy — the sweet spot between a bright primary color and a dark neutral. This is what gives them their "precious stone" quality.

• Emerald — deep, saturated green.
• Sapphire — rich royal blue.
• Ruby — deep saturated red.
• Amethyst — rich purple.

6 jewel tone color palettes (with hex codes)

1. Classic Jewels

The full jewel-box spectrum together.

#0B4F3A · #1B3358 · #7A1F3D · #4C1D95 · #8A6D00

2. Emerald & Gold

Rich green with metallic warmth.

#043927 · #0B6E4F · #1F9C6B · #D4A017 · #F1DFA8

3. Sapphire Night

Deep royal blues, moody and rich.

#0A1E4D · #1B3B8C · #2E5EC4 · #8FA9E0 · #E7ECF9

4. Ruby & Onyx

Bold red against near-black.

#0D0D0D · #2B0A12 · #7A1F3D · #B0234F · #E88AA6

5. Amethyst Dusk

Rich purples, dramatic and elegant.

#2E1065 · #4C1D95 · #7C3AED · #C4B5FD · #EDE9FE

6. Jewel Box Multi

A curated mix for eclectic, maximalist design.

#0B4F3A · #1B3B8C · #7A1F3D · #7C3AED · #D4A017

How to use jewel tones in CSS

:root {
  --jewel-emerald:  #0B6E4F;
  --jewel-sapphire: #1B3B8C;
  --jewel-ruby:     #7A1F3D;
  --jewel-amethyst: #4C1D95;
}

.card--premium { background: var(--jewel-sapphire); color: #fff; }

A jewel-toned gradient adds instant drama to a hero section:

.hero {
  background: linear-gradient(135deg, #1B3B8C 0%, #4C1D95 50%, #7A1F3D 100%);
}

Tips for designing with jewel tones

• Anchor with black or charcoal. Jewel tones look their richest against a very dark neutral, mimicking velvet or black jewelry boxes.
• Add gold or cream. A metallic or warm neutral accent completes the "luxury" feeling.
• Pick one hero jewel. Using every jewel tone at once can feel chaotic — let one (like sapphire or emerald) lead and use the others sparingly.
• Mind text contrast. Most jewel tones are dark enough to host white text comfortably — check the ratio to be sure.

Frequently asked questions

What colors are jewel tones?

Jewel tones include emerald green, sapphire blue, ruby red, amethyst purple and topaz gold — deep, richly saturated colors named after gemstones.

What is a good emerald hex code?

A rich emerald is #0B6E4F; for a deeper version try #043927, and for a brighter one use #1F9C6B.

What colors go with jewel tones?

Jewel tones pair beautifully with black, charcoal, gold and cream — dark neutrals let the saturated colors read as rich rather than garish.

Keep exploring: browse color palettes, see the purple color palette guide, or copy a jewel-tone gradient instantly.