Palette

Mystic Cavern

Deep and enchanting purples reminiscent of hidden geological formations and ancient magic.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Cavern 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 Mystic Cavern.

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

Data visualization

#301934#483D8B#6A5ACD#8A2BE2#9370DB

Palette guide

How to use Mystic Cavern

Overview

The Mystic Cavern palette unveils a rich and enchanting spectrum of purples, reminiscent of hidden geological formations and ancient magic. From the deep, grounding #301934 to the vibrant #8A2BE2 and the soft glow of #9370DB, this collection evokes mystery and fantasy. It's an excellent choice for projects seeking a luxurious, magical, or deeply immersive aesthetic. Designers and developers can utilize these captivating shades to craft unique branding, compelling game environments, and visually stunning digital experiences that draw users into a world of wonder.

Best used for

Fantasy game environments
Mystical brand identities
Luxury product packaging
Creative portfolio showcasing
Magical-themed events
Dark aesthetic websites

Suggested color roles

primary

Use #301934 as a deep, mysterious base for backgrounds or foundational design elements.

secondary

Employ #483D8B for supportive sections or to add a rich, indigo depth to your layout.

accent

Highlight interactive elements or magical effects with #8A2BE2, providing a vibrant, captivating pop.

background

Utilize #301934 as an immersive, dark canvas, allowing lighter elements to shimmer with an otherworldly glow.

text

A light grey or #9370DB provides excellent readability on the darker backgrounds, ensuring content stands out.

Accessibility notes

Use lighter colors like #9370DB for text on the darkest backgrounds, such as #301934, to ensure contrast.
Be cautious using #6A5ACD or #8A2BE2 for small text on medium-dark backgrounds due to potential low contrast.
Ensure sufficient contrast for interactive elements, especially buttons and links, against their backgrounds.
Large text (18pt or 14pt bold) requires a contrast ratio of at least 3:1 for WCAG AA compliance.

Recommended combinations

Enchanted Depths

Ideal for backgrounds and gradients that transition smoothly, creating a sense of deep mystery.

#301934 · #483D8B · #6A5ACD

Magical Sparkle

Perfect for interactive elements, glowing accents, or celestial-themed illustrations.

#8A2BE2 · #9370DB · #301934

Royal Hue

Great for headings, feature blocks, or sections that require a sophisticated, regal touch.

#483D8B · #6A5ACD · #9370DB

CSS variables

:root {
  --mystic-cavern-1: #301934;
  --mystic-cavern-2: #483D8B;
  --mystic-cavern-3: #6A5ACD;
  --mystic-cavern-4: #8A2BE2;
  --mystic-cavern-5: #9370DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-cavern": {
        1: "#301934",
        2: "#483D8B",
        3: "#6A5ACD",
        4: "#8A2BE2",
        5: "#9370DB",
      }
    }
  }
}

Hex values

Color 1#301934

Color 2#483D8B

Color 3#6A5ACD

Color 4#8A2BE2

Color 5#9370DB

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

2.7:1Fail

4.2:1AA18

1.8:1Fail

1.7:1Fail

1.5:1Fail

2.4:1Fail

3:1AA18

1.7:1Fail

1.1:1Fail

1.4:1Fail

2.7:1Fail

1.5:1Fail

1.1:1Fail

1.6:1Fail

4.2:1AA18

2.4:1Fail

1.4:1Fail

1.6:1Fail

Similar palettes

More like Mystic Cavern

View all dark

Amethyst Cavern Deep

Mystic Cavern Glow

Amethyst Crystal Cave

Mystic Amethyst Caves

Celestial Lanterns

Cosmic Dance Galaxy