Palette

Jewel Box Enchantment

A dazzling array of deep, saturated gemstone tones that sparkle with mystical energy and vibrant allure.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A0CA3#4361EE#4CC9F0#F72585#7209B7

Palette guide

How to use Jewel Box Enchantment

Overview

The 'Jewel Box Enchantment' palette dazzles with a vibrant, magical array of gemstone tones. Featuring a deep, royal Purple (#3A0CA3), a striking Electric Blue (#4361EE), and a brilliant Cyan (#4CC9F0), this collection is infused with dynamic energy. A captivating Hot Pink (#F72585) provides a bold, playful contrast, while a rich Amethyst (#7209B7) adds depth and sophistication. This palette is perfect for designers and developers aiming to create lively, enchanting, and memorable digital experiences or brand identities. Its saturated hues are designed to evoke wonder and a sense of precious luxury.

Best used for

fantasy game interfaces
fashion and beauty branding
event and party invitations
vibrant app designs
digital art and illustrations
luxury product showcases

Suggested color roles

primary

Use Electric Blue (#4361EE) for main calls-to-action or prominent headings to convey vibrancy and modern elegance.

secondary

Deep Purple (#3A0CA3) is ideal for navigation, subheadings, or sections requiring a sense of depth and luxury.

accent

Hot Pink (#F72585) serves as a dynamic accent for interactive elements, highlights, or decorative flourishes, adding bold energy.

background

A very light grey or even a subtle gradient incorporating #4CC9F0 can serve as an energetic background, allowing other vibrant colors to pop.

text

For maximum readability, use a crisp white or light grey on darker colors like #3A0CA3 and #7209B7. For lighter backgrounds, a charcoal black is recommended.

Accessibility notes

Ensure high contrast for text, especially when pairing #4CC9F0 with lighter backgrounds.
Avoid using #F72585 for small text sizes due to its high vibrancy and potential for eye strain.
Pair darker hues like #3A0CA3 or #7209B7 with light text (e.g., white) for optimal readability.
Check color contrast ratios for all interactive elements, particularly buttons and links, using WCAG guidelines.

Recommended combinations

Mystic Glow

Great for digital interfaces or backgrounds needing a vibrant, yet cohesive cool-toned gradient.

#3A0CA3 · #4361EE · #4CC9F0

Bold Fantasy

Excellent for creating impactful visual statements, hero sections, or striking brand elements.

#7209B7 · #F72585 · #4361EE

Enchanted Accents

Use for decorative patterns, icons, or secondary elements that need to stand out against a darker backdrop.

#4CC9F0 · #3A0CA3 · #F72585

CSS variables

:root {
  --jewel-box-enchantment-1: #3A0CA3;
  --jewel-box-enchantment-2: #4361EE;
  --jewel-box-enchantment-3: #4CC9F0;
  --jewel-box-enchantment-4: #F72585;
  --jewel-box-enchantment-5: #7209B7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jewel-box-enchantment": {
        1: "#3A0CA3",
        2: "#4361EE",
        3: "#4CC9F0",
        4: "#F72585",
        5: "#7209B7",
      }
    }
  }
}

Hex values

Color 1#3A0CA3

Color 2#4361EE

Color 3#4CC9F0

Color 4#F72585

Color 5#7209B7

Accessibility

Contrast checker

2.4:1Fail

6.2:1AA

3.2:1AA18

1.4:1Fail

2.4:1Fail

2.6:1Fail

1.3:1Fail

1.7:1Fail

6.2:1AA

2.6:1Fail

2:1Fail

4.5:1AA18

3.2:1AA18

1.3:1Fail

2:1Fail

2.3:1Fail

1.4:1Fail

1.7:1Fail

4.5:1AA18

2.3:1Fail

Similar palettes

More like Jewel Box Enchantment

View all vibrant

Celestial Opal Glow

Dragon Scales Gleam

Dragonfly Wing Iridescence

Emerald City Gleam

Jewel Box Radiance

Regal Gold Sapphire