Palette

Midnight Star Dust

The deep black of midnight giving way to sparkling blues and distant stars.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Star Dust 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 Star Dust.

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

Data visualization

#000000#191970#4169E1#87CEFA#FFFFFF

Palette guide

How to use Midnight Star Dust

Overview

The Midnight Star Dust palette beautifully captures the allure of a starlit night sky with its rich blues, stark black, and bright white. Anchored by true #000000, it features the profound #191970 and a vibrant #4169E1, culminating in the ethereal #87CEFA and crisp #FFFFFF. This palette is a designer's dream for creating impactful, elegant, and cosmic-themed interfaces or branding. Its strong contrasts and clear color hierarchy make it highly effective for digital applications, ensuring excellent visual clarity while maintaining a luxurious and sophisticated feel.

Best used for

Tech company branding and websites
Astronomy or space exploration content
Luxury product interfaces and packaging
Digital art and illustration
Event branding (galas, award ceremonies)
Modern dark mode applications

Suggested color roles

primary

Employ #191970 as the core brand color or dominant background for an immersive, deep blue experience.

secondary

Utilize #4169E1 for interactive elements, highlights, or subheadings, providing a vibrant yet harmonious contrast.

accent

Reserve #87CEFA for key calls-to-action, icons, or subtle star-like accents to draw immediate attention.

background

The true #000000 serves as an excellent deep, infinite background, while #191970 offers a softer dark base.

text

Use #FFFFFF for all primary text on dark backgrounds like #000000 or #191970 to ensure maximum readability and impact.

Accessibility notes

Ensure #87CEFA text on #FFFFFF backgrounds is avoided; contrast is too low.
The combination of #FFFFFF on #000000 or #191970 provides excellent contrast for all text sizes.
Check contrast for #4169E1 on #191970 if used for small text or critical information.
For decorative elements, #87CEFA can be used on #4169E1, but not for essential text.

Recommended combinations

Celestial Glow

Ideal for hero sections or prominent visual displays, creating a deep night sky with sparkling elements.

#000000 · #191970 · #87CEFA

Deep Ocean

Perfect for layering UI components, such as cards or navigation, offering clear hierarchy and visual appeal.

#191970 · #4169E1 · #FFFFFF

Starry Night

Use for impactful headers or graphical elements where the bright blue needs to stand out against a dark void.

#000000 · #87CEFA · #4169E1

CSS variables

:root {
  --midnight-star-dust-1: #000000;
  --midnight-star-dust-2: #191970;
  --midnight-star-dust-3: #4169E1;
  --midnight-star-dust-4: #87CEFA;
  --midnight-star-dust-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-dust": {
        1: "#000000",
        2: "#191970",
        3: "#4169E1",
        4: "#87CEFA",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#191970

Color 3#4169E1

Color 4#87CEFA

Color 5#FFFFFF

Accessibility

Contrast checker

1.4:1Fail

4.3:1AA18

12.2:1AAA

21:1AAA

1.4:1Fail

3.1:1AA18

8.7:1AAA

14.8:1AAA

4.3:1AA18

3.1:1AA18

2.8:1Fail

4.8:1AA

12.2:1AAA

8.7:1AAA

2.8:1Fail

1.7:1Fail

21:1AAA

14.8:1AAA

4.8:1AA

1.7:1Fail

Similar palettes

More like Midnight Star Dust

View all dark

Celestial Aura Bloom

Celestial Dust Trail

Cosmic Painter's Canvas

Cosmic Stardust Haze

Midnight Celestial Bloom

Night Sky Lumina