Palette

Midnight Iris Bloom

Deep, enigmatic purples inspired by the rare beauty of iris flowers blooming under a moonless night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#1A0B2C#4B0082#8A2BE2#C77ED4

Palette guide

How to use Midnight Iris Bloom

Overview

The Midnight Iris Bloom palette offers a sophisticated journey into deep purples and ethereal accents, perfect for designs requiring elegance and mystery. Anchored by the near-black #000033 and the rich #1A0B2C, it evokes the twilight hours. The striking #4B0082 provides a strong foundation, while the vibrant #8A2BE2 introduces an energetic, yet refined, pop. The soft #C77ED4 acts as a delicate counterpoint, adding a touch of floral lightness. This versatile collection is ideal for creating immersive digital experiences, high-end branding, or artistic expressions where mood and depth are paramount. Designers and developers can leverage its range to craft compelling visual narratives with a touch of nocturnal allure.

Best used for

Luxury brand identity and packaging
High-end event invitations and decor
Mysterious or fantasy-themed digital art and illustrations
Elegant UI/UX designs for apps or websites (e.g., fashion, beauty, creative portfolios)
Nightlife or entertainment venue branding
Editorial design for sophisticated magazines

Suggested color roles

primary

#1A0B2C - A rich, deep purple that serves as the dominant color, ideal for large sections, main backgrounds, or branding elements to establish a luxurious and mysterious tone.

secondary

#4B0082 - A strong, mid-tone indigo-purple that provides depth and structure. Excellent for subheadings, prominent buttons, or as a contrasting panel against the primary.

accent

#8A2BE2 - A vibrant blue-violet that demands attention. Use sparingly for interactive elements, highlights, calls-to-action, or small decorative details where a pop of energy is needed.

background

#000033 - The deepest, almost black indigo, perfect for dark mode interfaces, full-bleed backgrounds, or as a canvas that allows lighter colors to truly glow.

text

#C77ED4 - A soft, light lavender-pink that ensures readability against the dark palette colors. Best for primary body text, captions, or as a delicate header color on very dark backgrounds.

Accessibility notes

Ensure sufficient contrast when using lighter purples like #C77ED4 for text on darker backgrounds such as #000033 or #1A0B2C, targeting WCAG AA standards.
Avoid placing #8A2BE2 text directly on #4B0082 backgrounds without careful contrast checks, as their luminosity might be too similar for some users.
Consider providing an alternative light-on-dark text option (e.g., pure white or light grey) for maximum readability, especially for long-form content.
Be mindful of potential colorblindness (e.g., Tritanopia) when differentiating between the various purple and blue tones, using clear visual hierarchy or icon cues.

Recommended combinations

Deep Night Glow

Ideal for elegant dark mode interfaces or header sections, where #000033 forms the base, #1A0B2C provides secondary depth, and #C77ED4 serves as highly readable text.

#000033 · #1A0B2C · #C77ED4

Royal Contrast

Perfect for creating dynamic UI elements like buttons or navigation, where #1A0B2C is the background, #4B0082 is a subtle hover state, and #8A2BE2 is the active state or icon.

#1A0B2C · #4B0082 · #8A2BE2

Ethereal Bloom

Suited for artistic illustrations, accent panels, or data visualization, utilizing #4B0082 as a backdrop, #8A2BE2 for key data points, and #C77ED4 for labels.

#4B0082 · #8A2BE2 · #C77ED4

CSS variables

:root {
  --midnight-iris-bloom-2-1: #000033;
  --midnight-iris-bloom-2-2: #1A0B2C;
  --midnight-iris-bloom-2-3: #4B0082;
  --midnight-iris-bloom-2-4: #8A2BE2;
  --midnight-iris-bloom-2-5: #C77ED4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-iris-bloom-2": {
        1: "#000033",
        2: "#1A0B2C",
        3: "#4B0082",
        4: "#8A2BE2",
        5: "#C77ED4",
      }
    }
  }
}

Hex values

Color 1#000033

Color 2#1A0B2C

Color 3#4B0082

Color 4#8A2BE2

Color 5#C77ED4

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

3.4:1AA18

7:1AAA

1.1:1Fail

1.4:1Fail

3.1:1AA18

6.5:1AA

1.5:1Fail

1.4:1Fail

2.2:1Fail

4.5:1AA

3.4:1AA18

3.1:1AA18

2.2:1Fail

2.1:1Fail

7:1AAA

6.5:1AA

4.5:1AA

2.1:1Fail

Similar palettes

More like Midnight Iris Bloom

View all dark

Deep Twilight Bloom

Deep Plum Twilight

Evening Orchid Shimmer

Gothic Charm

Gothic Cloister Arch

Midnight Bloom Veil