Palette

Midnight Blooms

Deep blues and purples accented with pops of fuchsia, like rare flowers blooming under a moonless sky.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F2D#4B0082#8A2BE2#C71585#ADD8E6

Palette guide

How to use Midnight Blooms

Overview

The Midnight Blooms palette features deep blues and purples accented with pops of fuchsia, like rare flowers blooming under a moonless sky. Anchored by the profound #0F0F2D, it transitions through a rich indigo #4B0082 and a vibrant electric purple #8A2BE2. Striking accents come from the bold fuchsia #C71585 and the serene light blue #ADD8E6. This palette is ideal for designers and developers seeking to create dramatic, mysterious, yet visually captivating digital experiences. It’s perfect for high-impact branding, artistic web interfaces, or any project that requires a blend of deep, luxurious tones with energetic, unexpected bursts of color. It offers a unique balance of dark elegance and vibrant allure.

Best used for

Dramatic event branding (e.g., concerts, galas)
Artistic and creative portfolio websites
Luxury product launches and campaigns
Fashion editorial with a bold aesthetic
Digital art and illustration with high contrast
Music or entertainment industry branding

Suggested color roles

primary

#0F0F2D (A very deep, almost black, blue-purple, serving as the foundational background or dominant color for a dramatic, dark theme.)

secondary

#4B0082 (A rich, dark indigo, suitable for major sections, panels, or prominent graphic elements, adding luxurious depth.)

accent

#C71585 (A bold fuchsia, ideal for calls-to-action, key icons, or striking highlights that need to command immediate attention.)

background

#0F0F2D (Utilize this profound shade for an immersive and dramatic background, ensuring high contrast for lighter elements.)

text

#ADD8E6 or #8A2BE2 (For body text, #ADD8E6 provides excellent contrast. For headings, #8A2BE2 can offer a vibrant, yet readable, option on dark backgrounds.)

Accessibility notes

Ensure #ADD8E6 and #8A2BE2 have sufficient contrast against #0F0F2D or #4B0082 for body text.
Avoid using #4B0082 as primary text on #0F0F2D due to low contrast.
Use the bright accents (#C71585, #ADD8E6) for interactive elements to ensure they are clearly perceivable.
For critical information, a pure white text might be necessary if the palette's lighter colors don't meet WCAG AA standards.

Recommended combinations

Dramatic Contrast

Creates a high-impact composition, ideal for hero sections or branding that needs to be bold and memorable.

#0F0F2D · #8A2BE2 · #C71585

Mystic Glow

Perfect for softer sections, decorative patterns, or UI elements that require an ethereal, glowing touch.

#4B0082 · #ADD8E6 · #8A2BE2

Deep Fuchsia

Excellent for branding logos or key UI elements where deep contrast meets vibrant, unexpected accents.

#0F0F2D · #C71585 · #ADD8E6

CSS variables

:root {
  --midnight-blooms-1: #0F0F2D;
  --midnight-blooms-2: #4B0082;
  --midnight-blooms-3: #8A2BE2;
  --midnight-blooms-4: #C71585;
  --midnight-blooms-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-blooms": {
        1: "#0F0F2D",
        2: "#4B0082",
        3: "#8A2BE2",
        4: "#C71585",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#0F0F2D

Color 2#4B0082

Color 3#8A2BE2

Color 4#C71585

Color 5#ADD8E6

Accessibility

Contrast checker

1.4:1Fail

3.1:1AA18

3.4:1AA18

12.2:1AAA

1.4:1Fail

2.2:1Fail

2.4:1Fail

8.5:1AAA

3.1:1AA18

2.2:1Fail

1.1:1Fail

3.9:1AA18

3.4:1AA18

2.4:1Fail

1.1:1Fail

3.5:1AA18

12.2:1AAA

8.5:1AAA

3.9:1AA18

3.5:1AA18

Similar palettes

More like Midnight Blooms

View all Dark

Gothic Nightshade Bloom

Midnight Bloom Velvet

Abyssal Bioluminescence

Dark Academia Ink

Deep Forest Murmur

Deep Space Nebula