Palette

Midnight Opal Shimmer

Inspired by the dark, iridescent depths of an opal, shimmering with hidden colors under moonlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0A21#251B40#5C2D91#8C47A7#1E90FF

Palette guide

How to use Midnight Opal Shimmer

Overview

The Midnight Opal Shimmer palette captures the mystique and iridescent beauty of a dark opal under moonlight. Featuring deep, almost black #0B0A21, rich purples like #251B40, #5C2D91, and #8C47A7, it culminates in a striking, vibrant blue accent, #1E90FF. This combination offers designers and developers a dramatic yet sophisticated spectrum for projects that demand a magical, luxurious, or high-tech feel. The deep purples provide an elegant foundation, while the unexpected blue adds a captivating shimmer, making it perfect for creating truly unique and memorable visual experiences with an enchanting allure.

Best used for

Luxury jewelry brand websites and packaging
Mystical or fantasy-themed digital art
High-end fashion editorial design
Creative portfolios and artist websites
Event branding for exclusive galas
Gaming interfaces with a magical aesthetic

Suggested color roles

primary

Utilize #0B0A21 as the deep, dramatic background, setting a luxurious and mysterious stage.

secondary

Employ #251B40 and #5C2D91 for layered elements, subheadings, or background textures to build depth.

accent

Apply #1E90FF sparingly for high-impact calls to action, interactive elements, or key visual highlights.

background

Choose #0B0A21 for an immersive, dark background that amplifies the gem-like quality of the other colors.

text

For readability, use #8C47A7 for headings, and a crisp white or light gray for body text against the darker shades.

Accessibility notes

Ensure #1E90FF has sufficient contrast against all dark purples when used for text or interactive elements.
The darkest colors, #0B0A21 and #251B40, require very light text (e.g., white) for readability.
Use #8C47A7 for larger text elements or as an accent where a softer contrast is desired.
Provide clear visual cues for interactive elements, as the palette's depth can obscure subtle changes.

Recommended combinations

Deep Iridescence

For layered backgrounds or structural elements, creating a sense of profound depth.

#0B0A21 · #251B40 · #5C2D91

Opal Glow

Ideal for a shimmering effect, with #1E90FF as a vibrant, unexpected highlight.

#251B40 · #8C47A7 · #1E90FF

Mystical Contrast

A dramatic pairing for main content areas, where the blue provides a striking focal point.

#0B0A21 · #1E90FF · #5C2D91

CSS variables

:root {
  --midnight-opal-shimmer-1: #0B0A21;
  --midnight-opal-shimmer-2: #251B40;
  --midnight-opal-shimmer-3: #5C2D91;
  --midnight-opal-shimmer-4: #8C47A7;
  --midnight-opal-shimmer-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-opal-shimmer": {
        1: "#0B0A21",
        2: "#251B40",
        3: "#5C2D91",
        4: "#8C47A7",
        5: "#1E90FF",
      }
    }
  }
}

Hex values

Color 1#0B0A21

Color 2#251B40

Color 3#5C2D91

Color 4#8C47A7

Color 5#1E90FF

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

3.3:1AA18

6:1AA

1.2:1Fail

1.7:1Fail

2.7:1Fail

5:1AA

2.1:1Fail

1.7:1Fail

1.6:1Fail

2.9:1Fail

3.3:1AA18

2.7:1Fail

1.6:1Fail

1.8:1Fail

6:1AA

5:1AA

2.9:1Fail

1.8:1Fail

Similar palettes

More like Midnight Opal Shimmer

View all dark

Warlock's Brew Pot

Amethyst Cavern Deep

Amethyst Crystal Cave

Celestial Lanterns

Celestial Night Sky

Cosmic Dream Dust