Palette

Midnight Opera Veil

Sumptuous purples and plums that evoke the rich mystery and drama of a theatrical night.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Opera 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 Midnight Opera Veil.

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

Data visualization

#1A0A26#3C1E55#683E80#A06ABF#D5A9E6

Palette guide

How to use Midnight Opera Veil

Overview

The Midnight Opera Veil palette is a luxurious cascade of purples, from the deepest #1A0A26 to the ethereal #D5A9E6, conjuring images of grand theatrical nights and sumptuous velvet. This palette offers designers and developers a sophisticated spectrum for creating dramatic, elegant, and opulent visual experiences. The rich, dark tones like #3C1E55 and #683E80 provide a strong, mysterious foundation, while the lighter #A06ABF and #D5A9E6 introduce a delicate, almost shimmering quality. It's ideal for projects that require a sense of drama, luxury, and refined aesthetic, perfect for high-end fashion or cultural branding.

Best used for

Luxury fashion brand websites and campaigns
Theatrical production posters and programs
High-end event invitations and decor
Sophisticated beauty product packaging
Art gallery and museum digital interfaces
Elegant dark mode UI/UX designs

Suggested color roles

primary

Set #1A0A26 as the dominant background, providing a deep, velvety, and dramatic foundation.

secondary

Use #3C1E55 and #683E80 for layered panels, subheadings, or decorative elements to build rich depth.

accent

Apply #D5A9E6 as a soft, ethereal highlight for calls to action, important information, or delicate typography.

background

Choose #1A0A26 for an immersive, elegant dark background that accentuates the other purple tones.

text

Pair #D5A9E6 or a clean white/light gray for body text, ensuring excellent readability against the darker purples.

Accessibility notes

Ensure sufficient contrast for text on #1A0A26 and #3C1E55; use lighter palette colors or white.
Use #D5A9E6 for key interactive elements to ensure they stand out clearly against darker backgrounds.
Avoid low-contrast pairings like #3C1E55 on #1A0A26 for small or critical text.
Test legibility of mid-range colors like #A06ABF on various backgrounds for effective hierarchy.

Recommended combinations

Velvet Depths

For layered backgrounds and content blocks, creating a rich, profound sense of luxury.

#1A0A26 · #3C1E55 · #683E80

Dramatic Highlight

Ideal for gradients or highlighting sections, with #D5A9E6 providing an elegant, soft glow.

#3C1E55 · #A06ABF · #D5A9E6

Elegant Contrast

A sophisticated pairing for main content areas, with #D5A9E6 offering clear readability and flair.

#1A0A26 · #D5A9E6 · #683E80

CSS variables

:root {
  --midnight-opera-veil-1: #1A0A26;
  --midnight-opera-veil-2: #3C1E55;
  --midnight-opera-veil-3: #683E80;
  --midnight-opera-veil-4: #A06ABF;
  --midnight-opera-veil-5: #D5A9E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-opera-veil": {
        1: "#1A0A26",
        2: "#3C1E55",
        3: "#683E80",
        4: "#A06ABF",
        5: "#D5A9E6",
      }
    }
  }
}

Hex values

Color 1#1A0A26

Color 2#3C1E55

Color 3#683E80

Color 4#A06ABF

Color 5#D5A9E6

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.8:1AA

9.5:1AAA

1.4:1Fail

1.7:1Fail

3.5:1AA18

7.1:1AAA

2.3:1Fail

1.7:1Fail

2.1:1Fail

4.1:1AA18

4.8:1AA

3.5:1AA18

2.1:1Fail

2:1Fail

9.5:1AAA

7.1:1AAA

4.1:1AA18

2:1Fail

Similar palettes

More like Midnight Opera Veil

Glamorous Velvet Curtain

Midnight Velour Drapes

Midnight Velour Stage