Back to palettes

Palette

Midnight Celestial Bloom

A celestial journey through the deep blues of the night sky, dotted with luminous, star-like blooms.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F2B#2C2C5D#534F94#7D7DCB#B1B1ED

Palette guide

How to use Midnight Celestial Bloom

Overview

The "Midnight Celestial Bloom" palette offers a captivating journey through the deep blues and purples of a cosmic night sky. Anchored by the profound darkness of #0F0F2B and the mysterious depth of #2C2C5D, it blossoms into vibrant, star-like hues like #534F94 and #7D7DCB, culminating in the ethereal glow of #B1B1ED. This palette is perfect for designers aiming to evoke wonder, luxury, or a sense of the otherworldly. Developers will find it excellent for creating immersive digital experiences, from sleek dark mode interfaces to enchanting visual narratives, where vibrant accents pop against a sophisticated, deep blue backdrop.

Best used for

  • Sci-fi themed websites or games
  • Luxury brand digital interfaces
  • Event branding for galas or awards
  • Meditation and wellness apps
  • Night sky photography portfolios
  • Creative digital art installations

Suggested color roles

primary

#0F0F2B – The deepest navy, ideal for expansive backgrounds, footers, or main headers to establish a cosmic foundation.

secondary

#2C2C5D – A rich, deep blue perfect for navigation, secondary panels, or large text blocks on lighter backgrounds.

accent

#7D7DCB – Use for interactive elements, calls to action, or key informational highlights to draw attention with a luminous glow.

background

#0F0F2B or #2C2C5D for dark themes, providing a deep, immersive canvas. For lighter sections, #B1B1ED can offer a soft contrast.

text

#B1B1ED or white on darker blues like #0F0F2B or #2C2C5D for excellent legibility. Use #0F0F2B for text on #B1B1ED.

Accessibility notes

  • Ensure high contrast between #0F0F2B or #2C2C5D and #B1B1ED for all text elements.
  • Be mindful when using #534F94 and #7D7DCB together; their contrast may not be sufficient for small text.
  • Provide clear focus states for interactive elements, especially if using similar shades for active/inactive states.
  • Test text readability on gradient backgrounds if combining multiple colors from this palette.

Recommended combinations

Cosmic Depths

A high-contrast pairing for dark mode, #0F0F2B as background, #B1B1ED for primary text, and #7D7DCB for buttons.

#0F0F2B · #B1B1ED · #7D7DCB

Luminous Bloom

Creates a gradient-like effect or a layered design, with #2C2C5D as base, #534F94 for content blocks, and #B1B1ED for highlights.

#2C2C5D · #534F94 · #B1B1ED

Night Sky UI

Ideal for sleek UI components, using #0F0F2B for container, #2C2C5D for elements, and #7D7DCB for interactive states.

#0F0F2B · #2C2C5D · #7D7DCB

CSS variables

:root {
  --midnight-celestial-bloom-2-1: #0F0F2B;
  --midnight-celestial-bloom-2-2: #2C2C5D;
  --midnight-celestial-bloom-2-3: #534F94;
  --midnight-celestial-bloom-2-4: #7D7DCB;
  --midnight-celestial-bloom-2-5: #B1B1ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-celestial-bloom-2": {
        1: "#0F0F2B",
        2: "#2C2C5D",
        3: "#534F94",
        4: "#7D7DCB",
        5: "#B1B1ED",
      }
    }
  }
}

Related searches

celestial color schemedeep blue purple palettecosmic design colorsdark mode UI bluestarry night palette

Palette colors

Hex values

Color 1#0F0F2B
·
Color 2#2C2C5D
·
Color 3#534F94
·
Color 4#7D7DCB
·
Color 5#B1B1ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.6:1Fail
5:1AA
9.2:1AAA
2
1.4:1Fail
1.8:1Fail
3.5:1AA18
6.4:1AA
3
2.6:1Fail
1.8:1Fail
1.9:1Fail
3.6:1AA18
4
5:1AA
3.5:1AA18
1.9:1Fail
1.8:1Fail
5
9.2:1AAA
6.4:1AA
3.6:1AA18
1.8:1Fail

Similar palettes

More like Midnight Celestial Bloom

View all dark
Midnight Star Veil
Midnight Stellar Glow
Nocturnal Bloom
Void Walker's Gaze
City Neon Rain
Cosmic Starlight Gaze