Back to palettes

Palette

Velvet Abyss Theater

Profound blacks transitioning into the deepest purples, creating an atmosphere of luxurious, enigmatic depths.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Abyss Theater 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 Velvet Abyss Theater.

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

Data visualization

#000000#1A0A3A#2A0A5A#3A0A7A#4A0A9A

Palette guide

How to use Velvet Abyss Theater

Overview

The Velvet Abyss Theater palette plunges into luxurious, enigmatic depths, ideal for projects demanding profound sophistication. Featuring a stark black, #000000, which seamlessly transitions into deep, mysterious purples like #1A0A3A, #2A0A5A, #3A0A7A, and finally the vibrant #4A0A9A, this scheme evokes the grandeur of an opulent theater or a cosmic void. Designers and developers can leverage its dramatic contrasts to create immersive user experiences, high-end branding, or captivating digital art. Its dark base provides an excellent canvas for subtle luminous elements.

Best used for

  • Luxury brand identity
  • Dark mode user interfaces
  • Theatrical set and costume design
  • High-end event branding
  • Digital art and abstract visuals
  • Gaming interfaces with a mystical theme

Suggested color roles

primary

Use #000000 as the foundational deep black, establishing a sense of absolute luxury and depth.

secondary

Employ #1A0A3A and #2A0A5A for large content blocks or background variations, maintaining the dark, mysterious atmosphere.

accent

Apply #4A0A9A sparingly for interactive elements, call-to-action buttons, or subtle highlights, providing a vibrant focal point.

background

The deep #000000 or #1A0A3A serves as an excellent background, providing a rich canvas for lighter elements.

text

For optimal readability on dark backgrounds, use a light color like white or a very pale grey. For prominent titles, #4A0A9A can be effective.

Accessibility notes

  • Ensure high contrast for text on dark backgrounds; white or very light text is crucial.
  • Avoid using mid-tone purples for small text against similar dark backgrounds.
  • Interactive elements should have sufficient contrast ratios (at least 4.5:1 for small text) against their surroundings.
  • Consider larger font sizes for any text rendered in the lighter purples like #4A0A9A on darker shades.

Recommended combinations

Deep Contrast

Ideal for main headers and calls to action, providing strong visual hierarchy and a luxurious feel.

#000000 · #1A0A3A · #4A0A9A

Shadowed Depth

Perfect for subtle gradient effects, background textures, or layered elements that require depth without stark contrast.

#1A0A3A · #2A0A5A · #3A0A7A

Mystic Glow

Excellent for spotlighting key information or creating an ethereal glow in illustrations and iconography.

#000000 · #3A0A7A · #4A0A9A

CSS variables

:root {
  --velvet-abyss-theater-1: #000000;
  --velvet-abyss-theater-2: #1A0A3A;
  --velvet-abyss-theater-3: #2A0A5A;
  --velvet-abyss-theater-4: #3A0A7A;
  --velvet-abyss-theater-5: #4A0A9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-abyss-theater": {
        1: "#000000",
        2: "#1A0A3A",
        3: "#2A0A5A",
        4: "#3A0A7A",
        5: "#4A0A9A",
      }
    }
  }
}

Related searches

dark purple color schemeluxury theater palettedeep violet designenigmatic UI colorsvelvet night theme

Palette colors

Hex values

Color 1#000000
·
Color 2#1A0A3A
·
Color 3#2A0A5A
·
Color 4#3A0A7A
·
Color 5#4A0A9A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.5:1Fail
1.8:1Fail
2
1.1:1Fail
1.1:1Fail
1.3:1Fail
1.6:1Fail
3
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
4
1.5:1Fail
1.3:1Fail
1.2:1Fail
1.2:1Fail
5
1.8:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Velvet Abyss Theater

View all dark