Back to palettes

Palette

Midnight Bloom Shadow

Deep, velvety purples emerge from the darkness like flowers under a midnight moon.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Bloom Shadow 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 Midnight Bloom Shadow.

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

Data visualization

#1E1E2C#3F3F5F#5F5F7F#8E8EAE#BDBDEE

Palette guide

How to use Midnight Bloom Shadow

Overview

The Midnight Bloom Shadow palette offers deep, velvety purples that emerge from the darkness like flowers under a midnight moon. Beginning with the profound #1E1E2C, it gracefully lightens through rich #3F3F5F and #5F5F7F, culminating in the ethereal #8E8EAE and #BDBDEE. This collection of harmonious purples and blues is ideal for designers and developers seeking to create elegant, sophisticated, and slightly mysterious digital experiences. The subtle progression from deep to lighter tones provides depth and a tranquil, luxurious feel, making it perfect for high-end branding, serene user interfaces, or any project that benefits from an understated yet captivating nocturnal aesthetic. It balances darkness with gentle luminosity.

Best used for

  • Elegant dark mode UI/UX designs
  • Luxury brand identity for fashion or cosmetics
  • Sophisticated art or photography websites
  • Themed event invitations or digital assets
  • Wellness and mindfulness app interfaces
  • Digital art with a serene, nocturnal mood

Suggested color roles

primary

#1E1E2C (A very deep, dark blue-purple, serving as the strong foundation for backgrounds or dominant elements, conveying elegance and depth.)

secondary

#3F3F5F (A rich, slightly brighter purple-blue, suitable for major sections, panels, or secondary graphic elements, providing a subtle lift from the primary.)

accent

#BDBDEE (The lightest, ethereal lavender-blue, excellent for delicate highlights, interactive states, or subtle decorative elements to add a touch of softness.)

background

#1E1E2C (Use this deep, dark blue-purple for an immersive and sophisticated background, ensuring good contrast for lighter elements.)

text

#BDBDEE or #8E8EAE (For body text, #BDBDEE offers excellent contrast. #8E8EAE can be used for headings or subtext, providing a softer, yet readable option on dark backgrounds.)

Accessibility notes

  • Ensure #BDBDEE text has sufficient contrast against #1E1E2C and #3F3F5F for readability.
  • Avoid using #5F5F7F text on #3F3F5F backgrounds due to low contrast and potential readability issues.
  • Use the lighter shades (#8E8EAE, #BDBDEE) for interactive elements to ensure they are clearly distinguishable.
  • For critical information, consider a pure white or very light grey if the palette's lightest color doesn't meet WCAG AA standards.

Recommended combinations

Deep Velvet

Creates a balanced, elegant composition with a dark base, a warm mid-tone, and a delicate highlight.

#1E1E2C · #5F5F7F · #BDBDEE

Shadow Bloom

Ideal for softer sections, decorative patterns, or background gradients that require gentle transitions and depth.

#3F3F5F · #8E8EAE · #BDBDEE

Ethereal Glow

Excellent for sophisticated branding, logos, or UI elements where deep contrast meets soft, ethereal accents.

#1E1E2C · #BDBDEE · #8E8EAE

CSS variables

:root {
  --midnight-bloom-shadow-1: #1E1E2C;
  --midnight-bloom-shadow-2: #3F3F5F;
  --midnight-bloom-shadow-3: #5F5F7F;
  --midnight-bloom-shadow-4: #8E8EAE;
  --midnight-bloom-shadow-5: #BDBDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-bloom-shadow": {
        1: "#1E1E2C",
        2: "#3F3F5F",
        3: "#5F5F7F",
        4: "#8E8EAE",
        5: "#BDBDEE",
      }
    }
  }
}

Related searches

dark blue purple paletteelegant night colorsvelvet bloom designmysterious shadow themesoft indigo color scheme

Palette colors

Hex values

Color 1#1E1E2C
·
Color 2#3F3F5F
·
Color 3#5F5F7F
·
Color 4#8E8EAE
·
Color 5#BDBDEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
5.2:1AA
9.1:1AAA
2
1.6:1Fail
1.6:1Fail
3.2:1AA18
5.6:1AA
3
2.7:1Fail
1.6:1Fail
1.9:1Fail
3.4:1AA18
4
5.2:1AA
3.2:1AA18
1.9:1Fail
1.8:1Fail
5
9.1:1AAA
5.6:1AA
3.4:1AA18
1.8:1Fail

Similar palettes

More like Midnight Bloom Shadow

View all dark
Moonbeam Twilight
Amethyst Veil Mystique
Celestial Dust Glimmer
Gala Night Velvet
Galactic Starlight Veil
Gothic Night Bloom