Palette

Victorian Gothic Veil

A moody and mysterious palette evoking the somber elegance and romantic undertones of the Victorian gothic era.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Victorian Gothic 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 Victorian Gothic Veil.

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

Data visualization

#1a0a20#3a1a40#5a2a60#7a3a80#9a4a90

Palette guide

How to use Victorian Gothic Veil

Overview

The "Victorian Gothic Veil" color palette offers a journey into the somber elegance and romantic mystery of a bygone era. Dominated by deep, rich purples like #1a0a20, #3a1a40, and #5a2a60, this guide empowers designers and developers to craft experiences imbued with a sophisticated, moody atmosphere. The lighter shades, #7a3a80 and #9a4a90, provide subtle points of interest, preventing the overall scheme from becoming monochromatic. Ideal for projects seeking a dramatic yet refined aesthetic, this palette excels in conveying depth, luxury, and a touch of the enigmatic. It's a versatile choice for creating immersive digital environments or striking brand identities that stand apart.

Best used for

High-end luxury brand identities
Dark mode UI/UX designs
Theatrical set and costume design
Gothic or romantic literature cover art
Mystery game interfaces or environments
Fashion and apparel collections

Suggested color roles

primary

#1a0a20 - The foundational dark purple, perfect for expansive backgrounds or main structural elements, providing a deep, immersive base.

secondary

#3a1a40 - A slightly lighter, rich purple that complements the primary, ideal for sub-headers, card backgrounds, or secondary navigation.

accent

#9a4a90 - The most vibrant purple in the palette, best reserved for calls to action, interactive elements, or delicate decorative highlights.

background

#1a0a20 - Use this deepest shade for primary backgrounds to establish a truly gothic and luxurious feel, demanding light text.

text

For optimal readability, use a crisp white or very light grey text (e.g., #FFFFFF or #F0F0F0) against any of these dark purple backgrounds.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter purples as backgrounds.
Always test text legibility; a light text color (e.g., #FFFFFF) is crucial on dark purples like #1a0a20.
Avoid pairing #7a3a80 with #9a4a90 for small text or interactive elements due to potential low contrast.
Prioritize larger font sizes for important information to enhance readability within this dark palette.

Recommended combinations

Deep Elegance

A sophisticated combination for main layouts, using the darkest as a base, a mid-tone for secondary elements, and the lightest for impactful accents.

#1A0A20 · #3A1A40 · #9A4A90

Romantic Glow

Ideal for highlighting features or creating visual depth, moving from a rich base to a delicate, luminous accent.

#3A1A40 · #7A3A80 · #9A4A90

Subtle Intrigue

For nuanced designs where less contrast is desired, creating a mysterious and understated visual hierarchy.

#1A0A20 · #5A2A60 · #7A3A80

CSS variables

:root {
  --victorian-gothic-veil-1: #1a0a20;
  --victorian-gothic-veil-2: #3a1a40;
  --victorian-gothic-veil-3: #5a2a60;
  --victorian-gothic-veil-4: #7a3a80;
  --victorian-gothic-veil-5: #9a4a90;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "victorian-gothic-veil": {
        1: "#1a0a20",
        2: "#3a1a40",
        3: "#5a2a60",
        4: "#7a3a80",
        5: "#9a4a90",
      }
    }
  }
}

Hex values

Color 1#1a0a20

Color 2#3a1a40

Color 3#5a2a60

Color 4#7a3a80

Color 5#9a4a90

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.5:1Fail

3.4:1AA18

1.3:1Fail

1.4:1Fail

2:1Fail

2.7:1Fail

1.7:1Fail

1.4:1Fail

1.9:1Fail

2.5:1Fail

2:1Fail

1.4:1Fail

3.4:1AA18

2.7:1Fail

1.9:1Fail

1.4:1Fail

Similar palettes

More like Victorian Gothic Veil

Victorian Gothic Veil

See it in context.

Ready when you are.

Built with Victorian Gothic Veil.

How to use Victorian Gothic Veil

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Elegance

Romantic Glow

Subtle Intrigue

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Victorian Gothic Veil