Palette

Regal Gemstone Chest

A majestic collection of deep, rich jewel tones, reminiscent of precious gems in a royal chest.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Regal Gemstone Chest 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 Regal Gemstone Chest.

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

Data visualization

#4B0082#8B0000#DAA520#228B22#000080

Palette guide

How to use Regal Gemstone Chest

Overview

The Regal Gemstone Chest palette is a truly opulent collection, bringing together a diverse array of deep jewel tones. Featuring royal purple #4B0082, ruby red #8B0000, emerald green #228B22, sapphire blue #000080, and a touch of golden #DAA520, this scheme is ideal for conveying ultimate luxury and historical grandeur. Designers can create stunning visuals for high-end fashion, prestigious awards, or fantasy-themed projects. Developers will find these rich, saturated colors perfect for crafting immersive and dramatic user interfaces that leave a lasting impression of wealth and power.

Best used for

High-end fashion editorials
Luxury product displays
Prestigious awards branding
Opulent interior design concepts
Fantasy game user interfaces
Historical or royal themed projects

Suggested color roles

primary

Use #8B0000 as a dominant, rich red, providing a powerful and passionate anchor for your design.

secondary

Employ #000080 for deep, authoritative sections or as a complementary jewel tone, adding gravitas.

accent

Apply #DAA520 as a radiant gold for highlights, metallic elements, or calls to action to signify prestige.

background

Utilize #4B0082 as a profound, mysterious background, allowing the other jewel tones to truly sparkle.

text

White or a very light cream offers optimal readability against these dark, saturated colors, maintaining the luxurious aesthetic.

Accessibility notes

All dark background colors require light text (e.g., white) to meet WCAG AA contrast standards.
Ensure #DAA520 (gold) is used for larger elements or paired with dark text if used as a background itself.
Avoid using multiple highly saturated colors in close proximity for small text to prevent eye strain.
Test color contrast carefully, especially when combining dark jewel tones with each other.

Recommended combinations

Royal Trio

For a majestic header, golden accent, and a strong secondary element.

#4B0082 · #DAA520 · #8B0000

Deep Jewels

Ideal for showcasing a diverse range of rich, complementary jewel tones.

#8B0000 · #228B22 · #000080

Gold Accent

Perfect for highlighting key information against deep backgrounds with a touch of emerald.

#DAA520 · #4B0082 · #228B22

CSS variables

:root {
  --regal-gemstone-chest-1: #4B0082;
  --regal-gemstone-chest-2: #8B0000;
  --regal-gemstone-chest-3: #DAA520;
  --regal-gemstone-chest-4: #228B22;
  --regal-gemstone-chest-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "regal-gemstone-chest": {
        1: "#4B0082",
        2: "#8B0000",
        3: "#DAA520",
        4: "#228B22",
        5: "#000080",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8B0000

Color 3#DAA520

Color 4#228B22

Color 5#000080

Accessibility

Contrast checker

1.3:1Fail

5.8:1AA

3:1Fail

1.2:1Fail

1.3:1Fail

4.5:1AA18

2.3:1Fail

1.6:1Fail

5.8:1AA

4.5:1AA18

2:1Fail

7.2:1AAA

3:1Fail

2.3:1Fail

2:1Fail

3.6:1AA18

1.2:1Fail

1.6:1Fail

7.2:1AAA

3.6:1AA18

Similar palettes

More like Regal Gemstone Chest

View all dark

Byzantine Jewel

Regal Gemstone Splendor

Royal Jewel Brocade

Baroque Gemstone Vault

Emerald Vault

Emerald Velvet Glow