Palette

Midnight Celestial Veil

A deep, expansive palette capturing the shifting shades of a vast, starless midnight sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0C10#1A2F40#414D5F#89AAB8#D6DBE4

Palette guide

How to use Midnight Celestial Veil

Overview

The "Midnight Celestial Veil" palette offers a deep, expansive journey through the shifting shades of a starless midnight sky. It grounds designs with the profound darkness of #0B0C10 and the subtle blue-grey of #1A2F40. Mid-tones like #414D5F provide depth, while #89AAB8 introduces a misty, ethereal quality, culminating in the soft luminosity of #D6DBE4. This palette is exceptional for designers aiming to convey tranquility, mystery, or a vast, understated elegance. Developers will find it highly effective for creating sophisticated dark mode interfaces, atmospheric digital landscapes, or branding that exudes quiet strength and depth.

Best used for

Atmospheric gaming environments
Luxury automotive or tech branding
Minimalist dark mode UI designs
Architectural visualization
Abstract art installations
Serene meditation app interfaces

Suggested color roles

primary

#0B0C10 – The deepest, almost black shade, perfect for foundational backgrounds, footers, or impactful headers, providing ultimate depth.

secondary

#1A2F40 – A dark, muted blue-grey, ideal for secondary content panels, navigation, or subtle dividers.

accent

#89AAB8 – Use this misty blue-grey for interactive elements, subtle highlights, or to introduce a sense of ethereal glow.

background

#0B0C10 or #1A2F40 for a dark, immersive canvas. #D6DBE4 can serve as a light, airy background for contrast.

text

#D6DBE4 or a near-white on dark backgrounds like #0B0C10 or #1A2F40 for maximum legibility. Use #0B0C10 for text on #D6DBE4.

Accessibility notes

Ensure sufficient contrast between dark shades (#0B0C10, #1A2F40) and light shades (#D6DBE4, #89AAB8) for all text.
Be cautious when pairing #1A2F40 and #414D5F for text or small elements, as their contrast might be low.
For interactive components, use #89AAB8 as an accent to provide clear visual distinction against darker elements.
Always verify text legibility on all chosen background colors, especially for smaller font sizes.

Recommended combinations

Deep Horizon

A classic dark mode scheme, #0B0C10 as background, #D6DBE4 for primary text, and #89AAB8 for subtle interactive elements.

#0B0C10 · #D6DBE4 · #89AAB8

Misty Gradient

Creates a sophisticated, layered effect for hero sections or data visualizations, building depth with subtle transitions.

#1A2F40 · #414D5F · #89AAB8

Veiled Contrast

Excellent for a light-themed design, #D6DBE4 as background, #0B0C10 for headings, and #414D5F for supporting text.

#D6DBE4 · #0B0C10 · #414D5F

CSS variables

:root {
  --midnight-celestial-veil-1: #0B0C10;
  --midnight-celestial-veil-2: #1A2F40;
  --midnight-celestial-veil-3: #414D5F;
  --midnight-celestial-veil-4: #89AAB8;
  --midnight-celestial-veil-5: #D6DBE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-celestial-veil": {
        1: "#0B0C10",
        2: "#1A2F40",
        3: "#414D5F",
        4: "#89AAB8",
        5: "#D6DBE4",
      }
    }
  }
}

Hex values

Color 1#0B0C10

Color 2#1A2F40

Color 3#414D5F

Color 4#89AAB8

Color 5#D6DBE4

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

7.9:1AAA

14.1:1AAA

1.4:1Fail

1.6:1Fail

5.6:1AA

9.9:1AAA

2.3:1Fail

1.6:1Fail

3.5:1AA18

6.2:1AA