Back to palettes

Palette

Gothic Nightshade Bloom

Deep, mystical purples and grays inspired by the shadowed elegance of a gothic garden under a moonlit sky.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E2836#5B4F67#897798#B6A0CA#E4CAED

Palette guide

How to use Gothic Nightshade Bloom

Overview

The "Gothic Nightshade Bloom" palette offers a sophisticated spectrum of deep, mystical purples and grays, perfect for projects requiring an air of elegance and mystery. Inspired by shadowed gothic gardens under moonlight, this collection ranges from the profound depth of #2E2836 to the ethereal lightness of #E4CAED. Designers can leverage the rich mid-tones like #5B4F67 and #897798 to create depth, while #B6A0CA provides a beautiful transition. This palette is ideal for evoking a sense of luxury, introspection, and refined drama, ensuring a cohesive and enchanting visual experience across digital and print mediums. Its harmonious blend ensures a captivating aesthetic.

Best used for

  • Luxury brand identity and packaging
  • Fantasy or mystery game user interfaces
  • Elegant event invitations and decor (e.g., weddings, galas)
  • Dark mode UI themes for apps or websites
  • Art and photography portfolios with a dramatic flair
  • Fashion and beauty branding with a sophisticated edge

Suggested color roles

primary

#2E2836 - Use this deep, enigmatic purple-gray as the foundational color for branding, large headers, or dominant UI elements to establish a mood of profound elegance and mystery.

secondary

#5B4F67 - This slightly lighter, rich purple-gray provides excellent support, suitable for subheadings, active states, or background panels, complementing the primary without overwhelming it.

accent

#B6A0CA - Introduce this soft, captivating purple for calls-to-action, interactive elements, or subtle graphic highlights to draw attention and add a touch of delicate allure.

background

#2E2836 or #5B4F67 - For a truly dark and immersive experience, use #2E2836. For slightly less intensity, #5B4F67 works well, providing a rich canvas for lighter text and elements.

text

#E4CAED - This very light lavender offers excellent contrast against the darker palette colors, making it ideal for primary body text. Alternatively, a pure white or very light gray works well for readability on dark backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #E4CAED (lightest) with any darker shades, especially #B6A0CA, for body text to meet WCAG AA standards.
  • Avoid using mid-tones like #897798 and #5B4F67 for small text against each other, as their contrast might be insufficient.
  • When using #2E2836 as a background, ensure text elements are bright enough, preferably #E4CAED or pure white, for optimal readability.
  • Consider increasing font size or line height for text set in #B6A0CA on darker backgrounds to enhance legibility for all users.

Recommended combinations

Mystical Depth

Ideal for dark mode interfaces, dramatic website hero sections, or sophisticated print designs where #2E2836 anchors the design, #5B4F67 adds supporting depth, and #E4CAED provides stark, readable contrast for text.

#2E2836 · #5B4F67 · #E4CAED

Elegant Transition

Perfect for creating gradients, subtle layering in UI elements, or illustrating a smooth, harmonious flow. #5B4F67 grounds the look, #897798 provides a gentle mid-tone, and #B6A0CA acts as a soft highlight.

#5B4F67 · #897798 · #B6A0CA

Nightshade Accent

Use #2E2836 for dominant backgrounds, #B6A0CA for striking calls-to-action or key interactive elements, and #E4CAED for primary text, creating a bold yet refined visual hierarchy.

#2E2836 · #B6A0CA · #E4CAED

CSS variables

:root {
  --gothic-nightshade-bloom-1: #2E2836;
  --gothic-nightshade-bloom-2: #5B4F67;
  --gothic-nightshade-bloom-3: #897798;
  --gothic-nightshade-bloom-4: #B6A0CA;
  --gothic-nightshade-bloom-5: #E4CAED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-nightshade-bloom": {
        1: "#2E2836",
        2: "#5B4F67",
        3: "#897798",
        4: "#B6A0CA",
        5: "#E4CAED",
      }
    }
  }
}

Related searches

gothic purple color schemesdark mystical color paletteselegant nightshade colorsmoody purple gray designsophisticated dark ui colors

Palette colors

Hex values

Color 1#2E2836
·
Color 2#5B4F67
·
Color 3#897798
·
Color 4#B6A0CA
·
Color 5#E4CAED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.5:1AA18
6:1AA
9.5:1AAA
2
1.9:1Fail
1.9:1Fail
3.2:1AA18
5.1:1AA
3
3.5:1AA18
1.9:1Fail
1.7:1Fail
2.7:1Fail
4
6:1AA
3.2:1AA18
1.7:1Fail
1.6:1Fail
5
9.5:1AAA
5.1:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Gothic Nightshade Bloom

View all Dark
Midnight Blooms
Midnight Bloom Velvet
Midnight Velvet Gloom
Abyssal Bioluminescence
Dark Academia Ink
Deep Forest Murmur