Palette

Jewel Box Radiance

A luxurious mix of deep purples, blues, and gold, reflecting precious gems in a treasure chest.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jewel Box Radiance 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 Jewel Box Radiance.

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

Data visualization

#4B0082#8A2BE2#ADD8E6#FFD700#DC143C

Palette guide

How to use Jewel Box Radiance

Overview

The 'Jewel Box Radiance' palette offers a luxurious mix of deep purples, blues, and gold, reflecting precious gems in a treasure chest. It features a profound Dark Violet (#4B0082), a sophisticated Blue Violet (#8A2BE2), and a light, airy Light Blue (#ADD8E6). A dazzling Gold (#FFD700) provides a radiant highlight, complemented by a bold Crimson (#DC143C) for vibrant contrast. This palette is perfect for designers and developers seeking to create designs that convey elegance, fantasy, and a touch of aristocratic charm. Its blend of cool and warm tones allows for striking contrasts and sophisticated visual narratives.

Best used for

fantasy game branding
luxury event invitations
high-end fashion editorials
magical themed websites
jewelry design showcases
elegant digital art

Suggested color roles

primary

Dark Violet (#4B0082) serves as a powerful primary, ideal for main headings or background elements that need depth and mystery.

secondary

Blue Violet (#8A2BE2) is excellent for subheadings, navigation, or larger UI components, providing sophisticated richness.

accent

Gold (#FFD700) is the perfect accent for interactive elements, icons, or decorative flourishes, adding brilliance and luxury.

background

Light Blue (#ADD8E6) offers a clean, ethereal background, allowing the deeper jewel tones to stand out with clarity.

text

For dark backgrounds, use Gold (#FFD700) or a crisp white for clear legibility. On lighter backgrounds like #ADD8E6, a deep charcoal or #4B0082 works well.

Accessibility notes

Ensure Gold (#FFD700) text has sufficient contrast against lighter backgrounds; it truly shines on darker hues.
Light Blue (#ADD8E6) should not be used for small text on very light backgrounds as it may lack readability.
Dark Violet (#4B0082) and Blue Violet (#8A2BE2) require light text (e.g., white or #FFD700) for optimal contrast.
Always check WCAG guidelines for color contrast, especially for interactive elements and crucial information.

Recommended combinations

Royal Glow

Ideal for creating a majestic and luxurious feel in logos, hero sections, or high-impact branding.

#4B0082 · #8A2BE2 · #FFD700

Ethereal Sparkle

Perfect for light, airy designs, backgrounds, or elements that need a delicate yet radiant touch.

#ADD8E6 · #FFD700 · #8A2BE2

Bold Contrast

Effective for drawing strong attention to calls-to-action or critical information with a vibrant, dramatic flair.

#DC143C · #4B0082 · #FFD700

CSS variables

:root {
  --jewel-box-radiance-1: #4B0082;
  --jewel-box-radiance-2: #8A2BE2;
  --jewel-box-radiance-3: #ADD8E6;
  --jewel-box-radiance-4: #FFD700;
  --jewel-box-radiance-5: #DC143C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jewel-box-radiance": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#ADD8E6",
        4: "#FFD700",
        5: "#DC143C",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#ADD8E6

Color 4#FFD700

Color 5#DC143C

Accessibility

Contrast checker

2.2:1Fail

8.5:1AAA

9.2:1AAA

2.6:1Fail

2.2:1Fail

3.9:1AA18

4.2:1AA18

1.2:1Fail

8.5:1AAA

3.9:1AA18

1.1:1Fail

3.3:1AA18

9.2:1AAA

4.2:1AA18

1.1:1Fail

3.6:1AA18

2.6:1Fail

1.2:1Fail

3.3:1AA18

3.6:1AA18

Similar palettes

More like Jewel Box Radiance

View all vibrant

Emerald Gemstone Luster

Jewel Box Opulence

Ruby Gemstone Gleam

Art Deco Emerald Pool

Crimson Royal Gem

Dragon Scales Gleam