Back to palettes

Palette

Midnight Bloom Garden

Deep purples and lavenders evoke a mysterious garden blooming under the cover of night.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0C2F#3B1E5C#6E447E#A071A2#D3A1D5

Palette guide

How to use Midnight Bloom Garden

Overview

The Midnight Bloom Garden palette evokes a mysterious garden blooming under the cover of night, blending deep purples and lavenders. Starting with the profound #1A0C2F, it gracefully lightens through rich #3B1E5C and #6E447E, culminating in the softer #A071A2 and #D3A1D5. This palette is perfectly suited for designers and developers seeking to create elegant, sophisticated, and slightly mysterious digital experiences. The harmonious gradient of purple shades provides depth and a tranquil, luxurious feel, making it ideal for high-end branding, serene user interfaces, or any project that benefits from an understated yet captivating nocturnal aesthetic. It offers versatility for both dark and lighter compositions.

Best used for

  • Luxury lifestyle brand websites
  • Elegant wedding stationery and event branding
  • Serene meditation or wellness app interfaces
  • High-end fashion or jewelry photography backdrops
  • Digital art with mystical or floral themes
  • Boutique hotel or spa branding

Suggested color roles

primary

#1A0C2F (A very deep, dark purple, forming the strong foundation for backgrounds or dominant elements, conveying elegance and depth.)

secondary

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

accent

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

background

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

text

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

Accessibility notes

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

Recommended combinations

Deep Bloom

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

#1A0C2F · #6E447E · #D3A1D5

Soft Veil

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

#3B1E5C · #A071A2 · #D3A1D5

Garden Shadows

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

#1A0C2F · #D3A1D5 · #A071A2

CSS variables

:root {
  --midnight-bloom-garden-1: #1A0C2F;
  --midnight-bloom-garden-2: #3B1E5C;
  --midnight-bloom-garden-3: #6E447E;
  --midnight-bloom-garden-4: #A071A2;
  --midnight-bloom-garden-5: #D3A1D5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-bloom-garden": {
        1: "#1A0C2F",
        2: "#3B1E5C",
        3: "#6E447E",
        4: "#A071A2",
        5: "#D3A1D5",
      }
    }
  }
}

Related searches

midnight purple paletteelegant lavender color schemedark floral design colorsmysterious garden palettedeep plum and lilac

Palette colors

Hex values

Color 1#1A0C2F
·
Color 2#3B1E5C
·
Color 3#6E447E
·
Color 4#A071A2
·
Color 5#D3A1D5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.5:1Fail
4.7:1AA
8.6:1AAA
2
1.3:1Fail
1.8:1Fail
3.5:1AA18
6.4:1AA
3
2.5:1Fail
1.8:1Fail
1.9:1Fail
3.5:1AA18
4
4.7:1AA
3.5:1AA18
1.9:1Fail
1.8:1Fail
5
8.6:1AAA
6.4:1AA
3.5:1AA18
1.8:1Fail

Similar palettes

More like Midnight Bloom Garden

View all dark
Midnight Geode Crystal
Midnight Velour Stage
Twilight Bloom Garden
Elegant Plum Bloom
Gala Night Velvet
Imperial Velvet