Palette

Dark Mystical Veil

Deep, rich purples and grays evoke the enigmatic elegance of ancient tapestries shrouded in twilight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Mystical Veil 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 Dark Mystical Veil.

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

Data visualization

#2F2F4F#5A4C6B#8B7A9B#B8A9C8#E3D9E9

Palette guide

How to use Dark Mystical Veil

Overview

The Dark Mystical Veil palette unveils a serene gradient of deep purples and soft lavenders, evoking the enigmatic elegance of ancient tapestries shrouded in twilight. From the profound #2F2F4F to the ethereal #E3D9E9, this palette offers a sophisticated range for designs that require a mystical, elegant, and dreamy aesthetic. It's ideal for luxury branding, spiritual platforms, or any project seeking to convey a sense of wonder and refined beauty. Designers can leverage its harmonious progression for immersive backgrounds, while developers will find it perfect for dark mode interfaces that are both visually rich and incredibly soothing, promoting a calm user experience.

Best used for

Luxury beauty or fashion brands
Spiritual or wellness app interfaces
Fantasy-themed editorial layouts
Event branding for elegant galas or art exhibitions
Dark mode UI for journaling or meditation apps
Abstract art or dreamy digital illustrations

Suggested color roles

primary

#2F2F4F - A deep, enigmatic indigo-purple that provides a strong, elegant foundation for primary elements, large sections, or brand identity.

secondary

#5A4C6B - A rich, muted plum-purple, offering a sophisticated secondary color for navigation, accent panels, or important informational blocks.

accent

#B8A9C8 - A soft, luminous lavender, perfect for subtle highlights, interactive states, or delicate graphical details, creating an ethereal shimmer.

background

#2F2F4F - This deep indigo-purple doubles as an excellent immersive background, setting a mysterious and sophisticated tone.

text

#8B7A9B - A legible, muted purple that works well for body text on lighter backgrounds within the palette. For optimal readability on the darkest shades, consider a very light gray (e.g., #F0F0F0) or even #E3D9E9.

Accessibility notes

Ensure sufficient contrast when using #E3D9E9 for text on darker backgrounds like #2F2F4F or #5A4C6B.
Avoid placing #8B7A9B text on #5A4C6B; their contrast might be insufficient.
For critical text on the darkest backgrounds, opt for a pure white or very light gray to meet accessibility standards.
Test all text and background pairings using WCAG contrast checkers to meet AA or AAA standards.

Recommended combinations

Twilight Gradient

Creating seamless, deep purple gradients for backgrounds or large hero sections, adding mystical depth.

#2F2F4F · #5A4C6B · #8B7A9B

Ethereal Glow

Pairing a dominant dark purple with a luminous accent and a lighter purple for interactive elements and text.

#5A4C6B · #E3D9E9 · #B8A9C8

Velvet Layers

Designing UI elements where subtle tonal shifts provide hierarchy, like nested containers or tabs, for a soft feel.

#8B7A9B · #B8A9C8 · #E3D9E9

CSS variables

:root {
  --dark-mystical-veil-1: #2F2F4F;
  --dark-mystical-veil-2: #5A4C6B;
  --dark-mystical-veil-3: #8B7A9B;
  --dark-mystical-veil-4: #B8A9C8;
  --dark-mystical-veil-5: #E3D9E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-mystical-veil": {
        1: "#2F2F4F",
        2: "#5A4C6B",
        3: "#8B7A9B",
        4: "#B8A9C8",
        5: "#E3D9E9",
      }
    }
  }
}

Hex values

Color 1#2F2F4F

Color 2#5A4C6B

Color 3#8B7A9B

Color 4#B8A9C8

Color 5#E3D9E9

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

5.8:1AA

9.4:1AAA

1.6:1Fail

2:1Fail

3.6:1AA18

5.7:1AA

3.3:1AA18

2:1Fail

1.8:1Fail

2.9:1Fail

5.8:1AA

3.6:1AA18

1.8:1Fail

1.6:1Fail

9.4:1AAA

5.7:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Dark Mystical Veil

Dark Mystical Veil

See it in context.

Ready when you are.

Built with Dark Mystical Veil.

How to use Dark Mystical Veil

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Twilight Gradient

Ethereal Glow

Velvet Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dark Mystical Veil