Palette

Gothic Velvet Dusk

Deep, rich purples and muted lavenders capture the sophisticated gloom of a gothic manor at twilight, draped in luxury.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Velvet Dusk 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 Gothic Velvet Dusk.

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

Data visualization

#36283D#5E4A6F#8F7CA0#BBAAD1#231E2A

Palette guide

How to use Gothic Velvet Dusk

Overview

The Gothic Velvet Dusk palette evokes a sense of luxurious mystery, blending deep, muted purples with sophisticated lavenders. Anchored by the profound #231E2A (near-black) and the elegant #36283D, this palette is ideal for projects requiring a rich, introspective atmosphere. The mid-tones like #5E4A6F and #8F7CA0 provide depth, while the soft #BBAAD1 offers a delicate contrast, akin to a twilight sky. Designers can leverage its inherent elegance for high-end branding, creating interfaces that feel both exclusive and inviting. Developers will find these hex codes versatile for dark themes, ensuring visual consistency and a premium user experience across all elements.

Best used for

Luxury brand websites and apps
Elegant event invitations and decor
Dark mode UI/UX designs
Sophisticated editorial layouts
Art and photography portfolios
High-end fashion retail

Suggested color roles

primary

Use #36283D as the core foundational color for large sections, navigation, or primary branding elements, providing a deep, rich base.

secondary

Apply #5E4A6F for supporting panels, hover states, or secondary content areas, offering a softer yet still profound purple.

accent

Utilize #BBAAD1 sparingly for sophisticated highlights, interactive elements, or subtle graphic details to draw attention with elegance.

background

Employ #231E2A for a truly immersive, dark background, allowing lighter elements to pop with a velvety depth.

text

Pair #8F7CA0 for headings and important text on darker backgrounds for excellent readability, or use a crisp white for body copy.

Accessibility notes

Ensure sufficient contrast between #8F7CA0 text and darker backgrounds like #231E2A or #36283D.
Use #BBAAD1 for interactive elements to ensure visibility against deeper purples, but verify its contrast for text.
Avoid placing similar mid-tones like #5E4A6F and #8F7CA0 in close proximity for critical information to prevent visual ambiguity.
For body text, consider a pure white or very light gray on #231E2A for optimal readability for all users.

Recommended combinations

Deep Elegance

Perfect for sophisticated website footers, dark mode sidebars, or elegant title cards, offering strong contrast.

#231E2A · #36283D · #8F7CA0

Velvet Touch

Ideal for hover states, interactive buttons, or subtle graphic elements where a soft highlight is desired against a dark base.

#5E4A6F · #BBAAD1 · #231E2A

Twilight Gradient

Excellent for creating subtle gradients in hero sections, background patterns, or visual transitions that convey depth.

#36283D · #5E4A6F · #8F7CA0

CSS variables

:root {
  --gothic-velvet-dusk-1: #36283D;
  --gothic-velvet-dusk-2: #5E4A6F;
  --gothic-velvet-dusk-3: #8F7CA0;
  --gothic-velvet-dusk-4: #BBAAD1;
  --gothic-velvet-dusk-5: #231E2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-velvet-dusk": {
        1: "#36283D",
        2: "#5E4A6F",
        3: "#8F7CA0",
        4: "#BBAAD1",
        5: "#231E2A",
      }
    }
  }
}

Hex values

Color 1#36283D

Color 2#5E4A6F

Color 3#8F7CA0

Color 4#BBAAD1

Color 5#231E2A

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

6.4:1AA

1.2:1Fail

1.8:1Fail

2.1:1Fail

3.6:1AA18

2.1:1Fail

3.6:1AA18

2.1:1Fail

1.8:1Fail

4.3:1AA18

6.4:1AA

3.6:1AA18

1.8:1Fail

7.6:1AAA

1.2:1Fail

2.1:1Fail

4.3:1AA18

7.6:1AAA

Similar palettes

More like Gothic Velvet Dusk

Gothic Velvet Dusk

See it in context.

Ready when you are.

Built with Gothic Velvet Dusk.

How to use Gothic Velvet Dusk

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Elegance

Velvet Touch

Twilight Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gothic Velvet Dusk