Palette

Midnight Garden Bloom

Deep purples and blues capturing the enigmatic beauty of a garden illuminated only by moonlight and shadows.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#191970#483D8B#6A5ACD#8A2BE2#B0C4DE

Palette guide

How to use Midnight Garden Bloom

Overview

The Midnight Garden Bloom palette captures the enigmatic beauty of a garden illuminated by moonlight, with deep blues transitioning into vibrant purples and a soft light blue. Featuring #191970, #483D8B, #6A5ACD, #8A2BE2, and #B0C4DE, this collection is magical, elegant, and nocturnally floral. It's perfect for designs that aim to be sophisticated yet enchanting, offering a rich visual experience that blends mystery with delicate allure. The palette's range allows for dynamic contrasts, from deep, grounding tones to ethereal, blooming highlights.

Best used for

Luxury fashion and beauty brands
Artistic and creative projects
Event invitations and branding
Fantasy themes and illustrations
Sophisticated web and app interfaces
Mystical and spiritual content

Suggested color roles

primary

Utilize #191970 as the deepest navy for foundational backgrounds, headers, or robust structural elements, providing a strong, elegant anchor.

secondary

Employ #483D8B for supporting panels, card backgrounds, or secondary navigation, offering a rich dark purple-blue depth.

accent

Apply #8A2BE2 as a vibrant violet accent for calls-to-action, interactive elements, or key highlights, demanding attention with its luminosity.

background

Use #191970 for immersive, deep backgrounds, creating a sense of mystery and luxury.

text

For optimal readability on dark backgrounds, use white or a very light gray. For lighter text on darker purples, #B0C4DE provides a soft, legible option.

Accessibility notes

Ensure white or light gray text has strong contrast on #191970, #483D8B, and #6A5ACD.
Avoid using #B0C4DE for small text on #6A5ACD, as contrast might be insufficient.
Verify that #8A2BE2 is legible when used for text against other darks; it may require a lighter outline.
Use #B0C4DE as a background for sections where high text readability is paramount.

Recommended combinations

Night Sky

Combines deep blues with a light accent, ideal for creating depth and highlighting celestial elements.

#191970 · #483D8B · #B0C4DE

Blooming Violet

Offers a vibrant gradient of purples, perfect for illustrating growth or dynamic color transitions.

#483D8B · #6A5ACD · #8A2BE2

Moonlight Glow

Provides high contrast with a dark base, a vivid accent, and a soft highlight, suitable for striking visual compositions.

#191970 · #8A2BE2 · #B0C4DE

CSS variables

:root {
  --midnight-garden-bloom-1: #191970;
  --midnight-garden-bloom-2: #483D8B;
  --midnight-garden-bloom-3: #6A5ACD;
  --midnight-garden-bloom-4: #8A2BE2;
  --midnight-garden-bloom-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-garden-bloom": {
        1: "#191970",
        2: "#483D8B",
        3: "#6A5ACD",
        4: "#8A2BE2",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#483D8B

Color 3#6A5ACD

Color 4#8A2BE2

Color 5#B0C4DE

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

2.5:1Fail

8.3:1AAA

1.6:1Fail

1.7:1Fail

1.5:1Fail

5.1:1AA

2.8:1Fail

1.7:1Fail

1.1:1Fail

3:1Fail

2.5:1Fail

1.5:1Fail

1.1:1Fail

3.3:1AA18

8.3:1AAA

5.1:1AA

3:1Fail

3.3:1AA18

Similar palettes

More like Midnight Garden Bloom

View all dark

Celestial Glimmer Dust

Celestial Night Sky

Cosmic Night Bloom

Desert Starlight Glow

Ethereal Night Bloom

Stardust Galaxy Veil