Back to palettes

Palette

Opera House Drama

Rich, theatrical purples and deep blues evoking the luxurious, dramatic ambiance of an opera house.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Opera House Drama 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 Opera House Drama.

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

Data visualization

#483D8B#8B008B#A020F0#4B0082#2F4F4F

Palette guide

How to use Opera House Drama

Overview

The Opera House Drama palette masterfully blends deep purples and enigmatic blues, creating a luxurious and theatrical atmosphere. With rich tones like the deep slate blue #483D8B and the intense dark magenta #8B008B, this collection is perfect for projects seeking a sophisticated, gothic, or high-end aesthetic. The vibrant medium orchid #A020F0 provides a striking accent, while the profound indigo #4B0082 and dark slate gray #2F4F4F ground the palette with a sense of mystery and depth. Designers and developers can leverage these hues to craft immersive digital experiences, elegant branding, or dramatic UI elements that command attention and evoke grandeur. This palette excels in conveying luxury and a touch of the dramatic.

Best used for

  • Luxury brand websites and packaging
  • Theatrical event posters and programs
  • High-end fashion editorial layouts
  • Dark mode UI themes for creative apps
  • Elegant interior design visualizations
  • Gothic-inspired digital art

Suggested color roles

primary

Use #4B0082 (Indigo) as a deep, foundational purple, ideal for large backgrounds or primary branding elements, providing a sense of depth and luxury.

secondary

Employ #483D8B (Dark Slate Blue) as a rich, muted blue that offers a sophisticated contrast, suitable for secondary sections, navigation, or large text blocks.

accent

Apply #A020F0 (Medium Orchid) as a vibrant, eye-catching purple that demands attention, perfect for calls-to-action, interactive elements, or dramatic highlights.

background

Utilize #2F4F4F (Dark Slate Gray) as a very dark, almost black, gray with a subtle green undertone, excellent for creating a moody, dramatic backdrop.

text

Consider #8B008B (Dark Magenta) for headings on lighter backgrounds, or use a very light grey like #E0E0E0 for readability on dark backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #A020F0 with #2F4F4F for text, as it may be borderline.
  • Darker shades like #4B0082 and #2F4F4F require light text (e.g., white or a very light gray) for readability.
  • Avoid using #8B008B text on #483D8B backgrounds due to potential low contrast, especially for small text.
  • For interactive elements, provide visual cues beyond color, as many tones are deep and similar.

Recommended combinations

Royal Depth

Ideal for hero sections or brand identity, pairing a deep base with a rich secondary and a striking accent for impact.

#4B0082 · #483D8B · #A020F0

Dramatic Contrast

Excellent for dark mode interfaces, using the dark gray as background, orchid for highlights, and magenta for key information.

#2F4F4F · #A020F0 · #8B008B

Muted Elegance

Suitable for sophisticated print materials or subtle digital graphics, emphasizing deep, harmonious tones for a refined look.

#483D8B · #8B008B · #4B0082

CSS variables

:root {
  --opera-house-drama-1: #483D8B;
  --opera-house-drama-2: #8B008B;
  --opera-house-drama-3: #A020F0;
  --opera-house-drama-4: #4B0082;
  --opera-house-drama-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "opera-house-drama": {
        1: "#483D8B",
        2: "#8B008B",
        3: "#A020F0",
        4: "#4B0082",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

gothic purple color schemeluxury dark palettedramatic website colorselegant purple and bluetheatrical design palette

Palette colors

Hex values

Color 1#483D8B
·
Color 2#8B008B
·
Color 3#A020F0
·
Color 4#4B0082
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.7:1Fail
1.4:1Fail
1:1Fail
2
1.1:1Fail
1.6:1Fail
1.5:1Fail
1.1:1Fail
3
1.7:1Fail
1.6:1Fail
2.4:1Fail
1.7:1Fail
4
1.4:1Fail
1.5:1Fail
2.4:1Fail
1.5:1Fail
5
1:1Fail
1.1:1Fail
1.7:1Fail
1.5:1Fail

Similar palettes

More like Opera House Drama

View all dark