Palette

Amethyst Geode Sparkle

Inspired by the deep, crystalline purples and subtle shimmer found within an amethyst geode.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Amethyst Geode Sparkle 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 Amethyst Geode Sparkle.

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

Data visualization

#4B0082#8A2BE2#9370DB#BA55D3#DDA0DD

Palette guide

How to use Amethyst Geode Sparkle

Overview

The Amethyst Geode Sparkle palette captures the deep, crystalline purples and subtle shimmer found within an amethyst geode, delivering an elegant and mysterious aesthetic. With profound hues like `#4B0082` and `#9370DB`, complemented by the vibrant `#8A2BE2` and `#BA55D3`, this palette offers designers and developers a dynamic range. The softest shade, `#DDA0DD`, provides a delicate contrast, allowing for depth and visual interest across various applications. This palette’s intensity makes it excellent for projects aiming to convey luxury, creativity, or a touch of natural opulence.

Best used for

Luxury jewelry and accessory branding
Mystical themed digital art and illustrations
High-end cosmetic packaging
Fashion editorial design
Event branding (e.g., galas, art exhibitions)
Spiritual wellness product design

Suggested color roles

primary

Use `#9370DB` as a dominant color for impactful branding, headlines, or primary calls to action to convey richness and sophistication.

secondary

Apply `#8A2BE2` for supporting sections, subheadings, or larger UI components to maintain vibrancy and depth.

accent

Utilize `#DDA0DD` for highlights, interactive states, or delicate graphic elements to add a soft, luminous touch.

background

Deep `#4B0082` can create a luxurious, immersive background, while `#BA55D3` offers a more vibrant, engaging canvas for content.

text

For text on lighter backgrounds, a deep shade like `#4B0082` or black ensures readability. For text on dark backgrounds, use white or `#DDA0DD`.

Accessibility notes

Ensure `#4B0082` provides strong contrast against `#DDA0DD` for body text to maintain readability.
Test contrast ratios for `#8A2BE2` and `#BA55D3` when used for text against various background colors within the palette.
Avoid using `#DDA0DD` for small text against similarly light backgrounds to prevent legibility issues.
Consider using bold text or larger font sizes when applying mid-tone purples like `#BA55D3` for content.

Recommended combinations

Geode Core

Ideal for creating a luxurious, deep visual impact in headers or brand logos, reflecting crystal depths.

#4B0082 · #9370DB · #8A2BE2

Sparkling Facet

Excellent for accents, interactive elements, or sections needing a brighter, more playful shimmer.

#DDA0DD · #BA55D3 · #9370DB

Mystic Blend

Suited for gradients, data visualization, or illustrations that require a smooth transition of crystalline hues.

#8A2BE2 · #DDA0DD · #4B0082

CSS variables

:root {
  --amethyst-geode-sparkle-1: #4B0082;
  --amethyst-geode-sparkle-2: #8A2BE2;
  --amethyst-geode-sparkle-3: #9370DB;
  --amethyst-geode-sparkle-4: #BA55D3;
  --amethyst-geode-sparkle-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amethyst-geode-sparkle": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#9370DB",
        4: "#BA55D3",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#9370DB

Color 4#BA55D3

Color 5#DDA0DD

Accessibility

Contrast checker

2.2:1Fail

3.4:1AA18

3.3:1AA18

6.3:1AA

2.2:1Fail

1.6:1Fail

1.5:1Fail

2.9:1Fail

3.4:1AA18

1.6:1Fail

1:1Fail

1.8:1Fail

3.3:1AA18

1.5:1Fail

1:1Fail

1.9:1Fail

6.3:1AA

2.9:1Fail

1.8:1Fail

1.9:1Fail

Similar palettes

More like Amethyst Geode Sparkle

Amethyst Mystic Grotto

Cosmic Bloom Nebula

Crystal Geode Sparkle