Palette

Geode Amethyst Core

Rich, enigmatic purples mimicking the deep, hidden beauty of an amethyst geode.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A3F7A#7D5EB0#B18FDF#D8BCFF#3E2954

Palette guide

How to use Geode Amethyst Core

Overview

The Geode Amethyst Core palette (version 1) delves into the rich, enigmatic depths of amethyst, offering a sophisticated spectrum of purples. This collection features the very deep and grounding #3E2954, a robust dark purple #5A3F7A, and a vibrant mid-tone #7D5EB0. Lighter, shimmering lavenders like #B18FDF and #D8BCFF complete the array, evoking the inner glow of crystals. This palette is ideal for designs that require a touch of elegance, luxury, or mysticism. Designers can leverage these hues for premium branding, while developers will find them perfect for creating captivating digital experiences, artistic platforms, or exclusive product showcases.

Best used for

Elegant event invitations and branding
Luxury product packaging and marketing
Mystical or spiritual-themed websites
High-end jewelry e-commerce platforms
Creative agency portfolios
Sophisticated app interfaces and dashboards

Suggested color roles

primary

#3E2954 provides a profound and sophisticated primary background or header color, establishing a luxurious foundation.

secondary

#5A3F7A offers a rich, slightly lighter dark purple, ideal for secondary content blocks, navigation, or subtle overlays.

accent

#7D5EB0 serves as a vibrant and engaging accent, perfect for call-to-action buttons, interactive states, or key highlights.

background

#D8BCFF can be used for very light sections or as a subtle background pattern, allowing darker elements to stand out.

text

Light text, such as pure white or a very pale gray, is essential for readability against the darker purples.

Accessibility notes

Text on #3E2954, #5A3F7A, and #7D5EB0 must be light-colored (e.g., white or #D8BCFF) for sufficient contrast.
Ensure #B18FDF provides enough contrast with white text if used as a background for headings.
Avoid using #D8BCFF for body text; it's best suited as a background or for very large, dark headings.
Check contrast ratios carefully for all text and interactive elements.

Recommended combinations

Deep Crystal

A strong dark base, a harmonious mid-tone, and a bright accent, creating depth and vibrancy.

#3E2954 · #5A3F7A · #D8BCFF

Mystic Glow

Excellent for highlighting interactive elements or creating a layered effect in UI design.

#7D5EB0 · #B18FDF · #5A3F7A

Amethyst Gradient

Ideal for subtle background gradients or visual elements that require a smooth transition of purples.

#D8BCFF · #B18FDF · #7D5EB0

CSS variables

:root {
  --geode-amethyst-core-1: #5A3F7A;
  --geode-amethyst-core-2: #7D5EB0;
  --geode-amethyst-core-3: #B18FDF;
  --geode-amethyst-core-4: #D8BCFF;
  --geode-amethyst-core-5: #3E2954;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geode-amethyst-core": {
        1: "#5A3F7A",
        2: "#7D5EB0",
        3: "#B18FDF",
        4: "#D8BCFF",
        5: "#3E2954",
      }
    }
  }
}

Hex values

Color 1#5A3F7A

Color 2#7D5EB0

Color 3#B18FDF

Color 4#D8BCFF

Color 5#3E2954

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

5.2:1AA

1.5:1Fail

1.7:1Fail

1.9:1Fail

3.1:1AA18

2.5:1Fail

3.2:1AA18

1.9:1Fail

1.6:1Fail

4.8:1AA