Palette

Midnight Geode Crystal

Luxurious and mysterious, like gazing into the sparkling, deep violet heart of an exotic geode under the night sky.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Geode Crystal 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 Midnight Geode Crystal.

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

Data visualization

#0F0F1A#36003B#57068C#9A4FD7#D7A6F5

Palette guide

How to use Midnight Geode Crystal

Overview

The Midnight Geode Crystal palette offers a luxurious and mysterious journey into deep violet and purple tones, reminiscent of a sparkling geode under the night sky. With a foundation in near-black #0F0F1A, it transitions through rich #36003B and #57068C, culminating in vibrant accents like #9A4FD7 and #D7A6F5. This palette is designed for projects demanding elegance, depth, and a touch of mystique. Developers and designers can leverage its strong contrast and opulent shades to create visually striking interfaces, branding, or artistic expressions that convey sophistication and allure. The progression of purples ensures versatility, from deep, immersive backgrounds to dazzling, eye-catching highlights.

Best used for

High-end luxury branding and fashion
Fantasy or mystical-themed digital art
Elegant event design and invitations
Beauty and cosmetic product packaging
Sophisticated web and app interfaces
Gaming UI for fantasy or sci-fi genres

Suggested color roles

primary

Utilize #0F0F1A as the foundational background color for a profound, immersive dark experience.

secondary

Apply #36003B for secondary sections, borders, or subtle background patterns to add rich depth.

accent

Employ #D7A6F5 or #9A4FD7 for striking highlights, calls to action, or decorative elements to create visual sparkle.

background

The deepest #0F0F1A provides a dramatic and elegant canvas for most designs.

text

Use #D7A6F5 or #9A4FD7 for primary text on dark backgrounds, ensuring excellent readability, or pure white (e.g., #FFFFFF) for maximum contrast.

Accessibility notes

Ensure sufficient contrast when using #57068C for text on #36003B; larger text may be required.
Prioritize #D7A6F5 or #9A4FD7 for all interactive elements and essential text to meet WCAG guidelines.
Avoid placing light text (#D7A6F5) on mid-tone purples like #9A4FD7 without verifying contrast ratios.
Consider using a bold font for text in colors like #9A4FD7 to improve readability against darker tones.

Recommended combinations

Deep Mystique

Excellent for primary dark backgrounds with a rich supporting color and a vibrant, luxurious accent.

#0F0F1A · #36003B · #D7A6F5

Crystal Glow

Creates a shimmering, layered effect ideal for gradients, illustrations, or decorative UI elements.

#36003B · #57068C · #9A4FD7

Elegant Contrast

Provides a stark, elegant contrast perfect for headings, key information, or call-to-action buttons.

#0F0F1A · #9A4FD7 · #D7A6F5

CSS variables

:root {
  --midnight-geode-crystal-1: #0F0F1A;
  --midnight-geode-crystal-2: #36003B;
  --midnight-geode-crystal-3: #57068C;
  --midnight-geode-crystal-4: #9A4FD7;
  --midnight-geode-crystal-5: #D7A6F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-geode-crystal": {
        1: "#0F0F1A",
        2: "#36003B",
        3: "#57068C",
        4: "#9A4FD7",
        5: "#D7A6F5",
      }
    }
  }
}

Hex values

Color 1#0F0F1A

Color 2#36003B

Color 3#57068C

Color 4#9A4FD7

Color 5#D7A6F5

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

4.1:1AA18

9.7:1AAA

1.1:1Fail

1.5:1Fail

3.7:1AA18

8.7:1AAA

1.6:1Fail

1.5:1Fail

2.5:1Fail

5.9:1AA

4.1:1AA18

3.7:1AA18

2.5:1Fail

2.4:1Fail

9.7:1AAA

8.7:1AAA

5.9:1AA

2.4:1Fail

Similar palettes

More like Midnight Geode Crystal

View all dark

Midnight Bloom Garden

Midnight Velour Stage

Gala Night Velvet

Geode Amethyst Core

Imperial Velvet

Medieval Stained Glass