Palette

Gothic Night Bloom

A mysterious and luxurious collection of colors from a shadowed gothic garden at twilight.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Night Bloom 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 Night Bloom.

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

Data visualization

#3F204C#8B008B#1A001A#50C878#5A5A5A

Palette guide

How to use Gothic Night Bloom

Overview

The Gothic Night Bloom palette offers a sophisticated journey into a realm of profound elegance and mystery. Anchored by the deep, regal purple of #3F204C and the nearly black #1A001A, it evokes the shadowed allure of a twilight garden. A vibrant #8B008B (Dark Magenta) introduces a luxurious, passionate counterpoint, while the striking #50C878 (Emerald Green) provides a captivating, almost otherworldly accent. The versatile #5A5A5A (Medium Dark Grey) rounds out the collection, offering a grounding neutral. This palette is perfect for designers seeking to craft experiences that are both opulent and enigmatic, blending classic gothic depth with a touch of modern, jewel-toned vibrance.

Best used for

Luxury brand websites and digital interfaces
High-end event invitations and decor
Fashion editorial layouts and lookbooks
Packaging for premium beauty or fragrance products
Dark mode themes with an opulent feel
Themed digital art or game UI

Suggested color roles

primary

Use #3F204C (Deep Purple) for large sections, main headers, or primary branding elements to establish a luxurious, mysterious base.

secondary

Employ #8B008B (Dark Magenta) for interactive elements, call-to-action buttons, or supporting graphics that require a touch of passionate vibrancy.

accent

Reserve #50C870 (Emerald Green) for striking highlights, small icons, progress indicators, or key notifications to draw immediate attention.

background

Apply #1A001A (Near Black Purple) for deep, immersive backgrounds, full-page overlays, or large dark areas to create a sense of depth and luxury.

text

For main body text, use a crisp white or very light grey. #5A5A5A (Medium Dark Grey) is suitable for subtle secondary text, captions, or less critical information on lighter backgrounds if applicable, but generally should be paired with white on dark backgrounds.

Accessibility notes

Ensure sufficient contrast when using #50C878 (Emerald Green) for text or interactive elements against very dark backgrounds like #1A001A.
When pairing text with #8B008B (Dark Magenta), white or a very light grey offers the best readability for WCAG AA compliance.
Avoid using #5A5A5A (Medium Dark Grey) for critical text on dark backgrounds; it will likely lack sufficient contrast for accessibility.
Always test text and interactive element contrast with a reliable contrast checker, especially for smaller font sizes.

Recommended combinations

Mysterious Depth

Ideal for creating a profound, immersive background with rich purple layers and a vibrant focal point, suitable for landing pages or app screens.

#1A001A · #3F204C · #8B008B

Gothic Contrast

Perfect for a sophisticated interface where the deep purple is the primary color, the green acts as a striking accent, and the grey provides subtle detail or secondary text.

#3F204C · #50C878 · #5A5A5A

Elegant Highlight

Use this for a very dark base with elegant, jewel-toned highlights. The magenta can be for interactive elements, and the green for key alerts or visual flourishes.

#1A001A · #8B008B · #50C878

CSS variables

:root {
  --gothic-night-bloom-1: #3F204C;
  --gothic-night-bloom-2: #8B008B;
  --gothic-night-bloom-3: #1A001A;
  --gothic-night-bloom-4: #50C878;
  --gothic-night-bloom-5: #5A5A5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-night-bloom": {
        1: "#3F204C",
        2: "#8B008B",
        3: "#1A001A",
        4: "#50C878",
        5: "#5A5A5A",
      }
    }
  }
}

Hex values

Color 1#3F204C

Color 2#8B008B

Color 3#1A001A

Color 4#50C878

Color 5#5A5A5A

Accessibility

Contrast checker

1.6:1Fail

1.4:1Fail

6.5:1AA

2:1Fail

1.6:1Fail

2.3:1Fail

4:1AA18

1.2:1Fail

1.4:1Fail

2.3:1Fail

9.3:1AAA

2.9:1Fail

6.5:1AA

4:1AA18

9.3:1AAA

3.2:1AA18

2:1Fail

1.2:1Fail

2.9:1Fail

3.2:1AA18

Similar palettes

More like Gothic Night Bloom

View all dark

Amethyst Veil Mystique

Cathedral Stained Glass