paletta
PALETTE GALLERY

Jewel tone color palette

Jewel tones are saturated, dark-leaning hues named for gemstones: emerald, sapphire, ruby, amethyst. This set uses all four as accent colors against a single pearl background, which keeps four distinct hues from turning into visual noise.

Updated 2026-07-15

  • EmeraldPrimary
    #046A38
  • SapphireAccent
    #0F52BA
  • RubyHighlight
    #9B111E
  • AmethystAccent 2
    #6F2DA8
  • Onyx InkText
    #1A1A2E
  • PearlBackground
    #FAF7F2

Where this palette works

Premium and luxury product positioning

Saturated, dark jewel hues carry a weight that pastel or neon palettes cannot; the association with actual gemstones is doing real work.

Multi-category tagging or status systems

Four distinct, equally saturated hues give a natural four-way categorical set without reaching for an arbitrary rainbow.

Editorial dark accents on a light page

Small jewel-tone accents against pearl read as intentional and restrained rather than corporate blue.

Accessible pairings

Every jewel tone in this set clears at least AA against pearl on its own, which is unusual: most saturated accent colors need a dedicated ink color to reach body-text contrast. Onyx ink is still the better default for long-form copy at 15.96:1.

Aa
Onyx ink on pearl
Contrast 15.96 : 1AAA
Aa
Ruby on pearl
Contrast 7.88 : 1AAA
Aa
Emerald on pearl
Contrast 6.29 : 1AA
EXPORT

Use these tokens

Copy as CSS custom properties or a Tailwind v4 @theme block.

:root {
  --palette-primary: #046A38; /* Emerald */
  --palette-accent: #0F52BA; /* Sapphire */
  --palette-highlight: #9B111E; /* Ruby */
  --palette-accent-2: #6F2DA8; /* Amethyst */
  --palette-text: #1A1A2E; /* Onyx Ink */
  --palette-background: #FAF7F2; /* Pearl */
}

Frequently asked questions

Related palettes

Cool palette

A cool color palette built from deep teal, azure, and sky blue, with hex codes, accessible text pairings, and export-ready CSS variables.

Dark mode palette

A dark mode color palette with layered void, elevated, and card surfaces, electric blue and signal accents, hex codes, and accessible pairings.

Sunset palette

A sunset color palette built from dusk purple, twilight violet, coral, and gold flare, with hex codes, accessible text pairings, and export-ready CSS variables.

Build on this palette

Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.

Generate a palette