# Jewel tones: emerald, sapphire, ruby and amethyst codes

[Canonical HTML page](https://gradiently.design/guide/jewel-tone-colors)

Emerald, sapphire, ruby and amethyst look expensive because they are deep and saturated at once. Here are the codes, the pairings that keep them rich, and the mistakes that make them look like a costume.

## The short version

- Jewel tones are deep, highly saturated colours named after gemstones: emerald green, sapphire blue, ruby red, amethyst purple, plus topaz, citrine, garnet and tourmaline.
- What makes a colour a jewel tone is the combination of strong saturation and a medium to dark value, so it looks lit from within rather than bright or pale.
- Jewel tones look richest next to a warm neutral such as ivory, a near black, or a small amount of muted gold.
- Emerald, sapphire, ruby and amethyst all pass WCAG AA contrast for body text against white or ivory at the codes in this article.
- Use one jewel tone as the lead colour and at most one other as an accent, because a full set of gemstones at equal strength reads as a costume.

**Jewel tones** are deep, saturated colours named after precious stones: emerald `#00674F`, sapphire `#0F52BA`, ruby `#9B111E` and amethyst `#6A3D9A` are the four everyone recognises, with topaz, citrine, garnet and tourmaline close behind. They sit in a narrow band: much richer than pastels, darker than neon, and never greyed down like earth tones. That combination is why they read as valuable, and why they suit evening events, winter campaigns, wine labels and any brand that wants to feel substantial without going black.

## Jewel tone hex codes

These are working codes, tuned to look like the stone on a screen and to hold up as text. Gemstones vary, so there is no single official emerald, but these values sit squarely in what people picture.

- Emerald: #00674f
- Sapphire: #0f52ba
- Ruby: #9b111e
- Amethyst: #6a3d9a
- Topaz: #d98e04
- Citrine: #e1b000
- Garnet: #6f1d2b
- Tourmaline: #b0185a
- Teal tourmaline: #0e7c7b

Nine jewel tones. The first four are the classic set; topaz and citrine are the warm, light members of the family.

| Jewel tone | Hex | RGB | Text on white |
| --- | --- | --- | --- |
| Emerald | `#00674F` | 0, 103, 79 | 6.88:1, passes AA |
| Sapphire | `#0F52BA` | 15, 82, 186 | 7.15:1, passes AAA |
| Ruby | `#9B111E` | 155, 17, 30 | 8.42:1, passes AAA |
| Amethyst | `#6A3D9A` | 106, 61, 154 | 7.64:1, passes AAA |
| Teal tourmaline | `#0E7C7B` | 14, 124, 123 | 5.01:1, passes AA |
| Tourmaline | `#B0185A` | 176, 24, 90 | 6.72:1, passes AA |
| Topaz | `#D98E04` | 217, 142, 4 | use dark text on it |
| Citrine | `#E1B000` | 225, 176, 0 | use dark text on it |

Contrast is measured against pure white. Topaz and citrine are too light for text on white, but carry near black text well: citrine with `#14141A` reaches 9.10:1.

If you need these in another format, [hex color codes](https://gradiently.design/guide/color-codes-explained) explains how hex, RGB and HSL relate, and [hex to RGB](https://gradiently.design/guide/hex-to-rgb) shows the conversion by hand.

## What makes a colour a jewel tone

Two settings, both at once. Saturation is high: the colour is pure, with almost no grey in it. Value is medium to dark: it sits well below white. Raise the value and emerald turns into mint; lower the saturation and it turns into sage. Keep both, and you get the glow of light passing through a cut stone.

### Not a jewel tone

- Mint `#98E5C8`: too light, a pastel
- Sage `#8A9A84`: greyed down, a muted tone
- Lime `#7CFF3A`: bright and electric, a neon
- Forest `#1F3B2C`: so dark it reads as near black

### Jewel tone

- Emerald `#00674F`: pure green at a medium dark value
- Sapphire `#0F52BA`: saturated blue, clearly lit
- Ruby `#9B111E`: deep red that still glows
- Amethyst `#6A3D9A`: purple with depth, not grey

This is the same idea [tints, tones and shades](https://gradiently.design/guide/tints-tones-shades) describes: jewel tones are mostly pure hues with a little black added, rarely with white or grey. They also sit at the opposite end from [earth tones](https://gradiently.design/guide/earth-tone-colors), which are the same hues pulled towards brown.

## Jewel tone colour palettes you can use

A jewel tone needs something quiet around it. On its own, a page of emerald is heavy; next to ivory, it looks deliberate. These four palettes each lead with one stone and add support in the right proportion.

- **Emerald library:** emerald `#00674F`, ivory `#F6EFE2`, muted gold `#C9A24A`, ink `#14141A`. Classic, bookish, good for publishers and bars.
- **Sapphire night:** sapphire `#0F52BA`, midnight `#0B1430`, pearl `#EEF0F5`, citrine `#E1B000` as a small accent. Calm and confident.
- **Ruby supper:** ruby `#9B111E`, garnet `#6F1D2B`, cream `#F4EADB`, olive `#5E6B3A`. Warm, generous, made for food and wine.
- **Amethyst studio:** amethyst `#6A3D9A`, plum `#3B1F4F`, linen `#F2ECE4`, teal tourmaline `#0E7C7B`. Creative and a little unexpected.

Use the [60 30 10 rule](https://gradiently.design/guide/60-30-10-rule) as a starting split: the neutral covers most of the surface, the jewel tone takes the large shapes, and the accent gets a sliver. Gold works best muted; a bright yellow gold next to emerald quickly looks like a costume.

## Jewel tone gradients

Jewel tones make some of the richest gradients there are, because each one can fade into its own shadow without turning muddy. Keep neighbours close on the colour wheel, and let a dark ground do most of the work.

- Emerald depth: `radial-gradient(circle at 30% 25%, #10a37f 0%, #00674f 40%, #052a22 85%)`
- Sapphire rise: `linear-gradient(150deg, #0b1430 0%, #0f52ba 60%, #4f86e6 100%)`
- Ruby glow: `radial-gradient(circle at 70% 30%, #d4243a 0%, #9b111e 40%, #3a0710 90%)`
- Amethyst to tourmaline: `linear-gradient(160deg, #1e0f33 0%, #6a3d9a 55%, #b0185a 100%)`
- Emerald to sapphire: `linear-gradient(135deg, #00674f 0%, #0e7c7b 50%, #0f52ba 100%)`
- Citrine over garnet: `radial-gradient(circle at 50% 20%, #e1b000 0%, #d98e04 30%, #6f1d2b 95%)`

Six jewel tone gradients. Each stays within neighbouring hues, so the middle of the blend stays clean.

Avoid blending ruby straight into emerald. They are complementary, so the midpoint turns brown; [muddy gradients](https://gradiently.design/guide/muddy-gradients) explains why and how to route around it through a third colour or a dark ground.

## Where jewel tones work best

Jewel tones carry weight, so they suit moments that should feel considered: an invitation, a seasonal menu, an annual report cover, a launch for something that costs real money. Set the type in ivory or a pale tint of the same hue, and keep the layout spare.

A portrait invitation for a winter dinner with pale lettering on a deep, rich background

A 5×7 in invitation at 1500×2100. A deep ground with pale type is the classic jewel tone move.

A portrait social post announcing a limited ruby edition product on a deep coloured background

An Instagram post at 1080×1350 for a limited product, letting one stone set the mood.

Plenty of brands reach for jewel tones in autumn and winter, which is exactly why a seasonal campaign can blur into everyone else's. If you want the richness without the sameness, a Gradiently Mark gives you a jewel toned background that only you can export with once you claim it, and it keeps your words readable wherever they sit.

## Common mistakes with jewel tones

- **Using four stones at full strength.** Emerald, sapphire, ruby and amethyst together look like a box of sweets. Pick one lead.
- **Pairing with pure white.** It works for contrast but looks clinical. A warm ivory makes the colour look deeper.
- **Putting light jewel tones under white text.** Citrine and topaz need dark text; white on citrine fails contrast badly.
- **Printing without a proof.** Saturated blues and purples often fall outside the CMYK range and dull on paper. Read [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) before you send a file.

## FAQ

### What are jewel tones?

Jewel tones are deep, saturated colours named after gemstones, such as emerald green, sapphire blue, ruby red and amethyst purple. They combine strong saturation with a medium to dark value.

### What is the hex code for emerald green?

A good jewel tone emerald is `#00674F`. Lighter emeralds such as `#50C878` are common on the web, but they read as a bright mid green rather than as a gemstone.

### What colours go with jewel tones?

Warm neutrals such as ivory and cream, near black, and small amounts of muted gold. A jewel tone usually looks best with one other jewel tone at most, used as an accent.

### What is the difference between jewel tones and earth tones?

Jewel tones are pure and saturated; earth tones are the same hues pulled towards brown and grey. Emerald is a jewel tone, olive is an earth tone.

### Are jewel tones good for a brand?

They suit brands that want to feel rich, established or celebratory, such as hospitality, publishing and premium goods. Choose one stone as your lead and keep plenty of neutral space around it.