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 */
}

FAQ

Frequently asked questions

Mostly yes here, which is uncommon. Ruby and amethyst both clear AAA against pearl (7.88:1 and 7.51:1), so they can be used for headings or emphasized text, not just badges and icons.

A single-accent palette runs out of ways to differentiate categories. Four jewel tones at matched saturation and lightness give a categorical set, status, tags, chart series, that reads as one coherent family instead of four unrelated colors.

A warm, low-saturation neutral like Pearl (#FAF7F2) rather than pure white. Pure white slightly desaturates the jewel tones by contrast; a warm off-white lets them hold their intensity.

Related palettes

Build on this palette

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