Back to palettes

Palette

Midnight Iris Bloom

Deep, mystical blues and violets create an elegant, enigmatic atmosphere of a nocturnal floral display.

darkelegant5 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

#191970#483D8B#6A5ACD#8A2BE2#4B0082

Palette guide

How to use Midnight Iris Bloom

Overview

The "Midnight Iris Bloom" is a deeply elegant and enigmatic color palette, perfect for projects requiring a sophisticated, mystical aura. Dominated by rich blues and violets, it evokes the serene beauty of a nocturnal floral display. The primary deep indigo, #191970, sets a profound base, complemented by the softened royal blue, #483D8B. Lighter shades like the vibrant medium slate blue, #6A5ACD, and the striking blue violet, #8A2BE2, introduce visual interest and contrast, while the very dark indigo, #4B0082, adds a touch of profound depth. This palette is ideal for creating designs that feel luxurious, introspective, and subtly dramatic, offering a refined aesthetic without being overly bright or distracting. Developers can leverage its cohesive dark theme for sophisticated UI/UX.

Best used for

  • luxury brand websites
  • high-end event invitations
  • meditation or wellness apps
  • dark mode UI themes
  • elegant fashion designs
  • fine art portfolios

Suggested color roles

primary

Ideal as the dominant background color for a luxurious, profound feel, establishing a strong, elegant foundation with #191970.

secondary

Excellent for primary navigation, headers, or large content blocks, offering a slightly softer yet rich contrast to the primary with #483D8B.

accent

Use sparingly for calls-to-action, interactive elements, or key highlights to draw attention without overpowering the elegance, using #8A2BE2.

background

A sophisticated choice for subtle background textures, footers, or secondary panels, adding depth without visual noise using #4B0082.

text

Suitable for secondary text or subheadings with #6A5ACD. For main body text, consider a light grey or near-white against these dark backgrounds to ensure readability.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter palette colors like #6A5ACD on darker backgrounds. Aim for WCAG AA or AAA.
  • Avoid using #4B0082 directly on #191970 for small text; the contrast is too low for most accessibility standards.
  • Reserve #8A2BE2 for larger headings or interactive elements if placed on darker tones to maintain readability.
  • Consider using a very light grey or off-white for body text on the deepest blues to prevent eye strain in extended reading.

Recommended combinations

Deep Elegance

Perfect for main layouts, with #191970 as background, #483D8B for sections, and #6A5ACD for headings or accents.

#191970 · #483D8B · #6A5ACD

Mystic Glow

Use #4B0082 as a deep backdrop, #8A2BE2 for striking focal points, and #6A5ACD for supporting text or subtle graphics.

#4B0082 · #8A2BE2 · #6A5ACD

Subtle Depth

Excellent for layered dark interfaces; #191970 base, #4B0082 for cards, and #483D8B for interactive elements or borders.

#191970 · #4B0082 · #483D8B

CSS variables

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

Tailwind config

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

Related searches

dark blue purple paletteelegant night colorsmystical violet blue schemeluxury indigo palettemidnight floral hues

Palette colors

Hex values

Color 1#191970
·
Color 2#483D8B
·
Color 3#6A5ACD
·
Color 4#8A2BE2
·
Color 5#4B0082
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
2.5:1Fail
1.1:1Fail
2
1.6:1Fail
1.7:1Fail
1.5:1Fail
1.4:1Fail
3
2.8:1Fail
1.7:1Fail
1.1:1Fail
2.4:1Fail
4
2.5:1Fail
1.5:1Fail
1.1:1Fail
2.2:1Fail
5
1.1:1Fail
1.4:1Fail
2.4:1Fail
2.2:1Fail

Similar palettes

More like Midnight Iris Bloom

View all dark
Deep Indigo Inkwell
Midnight Orchid Bloom
Mystic Garden Bloom
Regal Orchid Bloom
Whispering Orchid Veil
Amethyst Veil Mystique