Palette

Midnight Star Dust

Dark, brooding blues with a whisper of distant starlight, perfect for an astronomical gaze.

darkdark5 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

#000022#2B2D42#485E7B#8D99AE#C2C7CC

Palette guide

How to use Midnight Star Dust

Overview

This iteration of the "Midnight Star Dust" palette offers a more grounded and subtly mysterious exploration of the cosmos, featuring deep, brooding blues and muted greys. It begins with an ultra-dark navy (#000022), progressing to a rich, almost black slate (#2B2D42). A sophisticated dark steel blue (#485E7B) provides a mid-tone, while a soft, cool grey (#8D99AE) and a delicate light grey (#C2C7CC) evoke the faint glimmer of distant starlight or lunar surfaces. This palette is ideal for designers seeking a serious, elegant, and subtly cosmic aesthetic, perfect for high-tech, scientific, or minimalist luxury projects.

Best used for

High-tech company branding
Scientific research publication design
Minimalist web and app interfaces
Astronomical observatory websites
Luxury product packaging (subtle elegance)
Data visualization with a dark theme

Suggested color roles

primary

#000022 serves as the profound, anchoring background, establishing a sense of deep space and seriousness.

secondary

#2B2D42 is excellent for secondary panels, navigation, or larger text blocks, maintaining the sophisticated dark theme.

accent

#485E7B can be used for subtle highlights, interactive elements, or graphical accents that require a touch of distinction.

background

#C2C7CC provides a very light, neutral canvas for content, ensuring readability while preserving the palette's cool elegance.

text

For dark backgrounds like #000022, use #C2C7CC or white. For light backgrounds like #C2C7CC, use #000022 or a very dark grey for optimal readability.

Accessibility notes

Ensure #000022 text on #C2C7CC background meets WCAG AAA contrast for body text.
#2B2D42 provides good contrast on #C2C7CC for headings and larger text.
Be cautious using #8D99AE for small text on #C2C7CC, as contrast might be insufficient.
For interactive elements, ensure #485E7B has sufficient contrast against its surrounding background.

Recommended combinations

Galactic Core

Creates a powerful, deep dark mode interface, ideal for applications requiring a serious and professional look.

#000022 · #2B2D42 · #485E7B

Lunar Dust

Excellent for creating subtle visual hierarchy in light-themed interfaces, evoking a clean, sophisticated, and muted feel.

#485E7B · #8D99AE · #C2C7CC

Starlight Glimmer

Ideal for showcasing content on a light background with strong, dark structural elements and subtle blue accents.

#000022 · #C2C7CC · #485E7B

CSS variables

:root {
  --midnight-star-dust-3-1: #000022;
  --midnight-star-dust-3-2: #2B2D42;
  --midnight-star-dust-3-3: #485E7B;
  --midnight-star-dust-3-4: #8D99AE;
  --midnight-star-dust-3-5: #C2C7CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-dust-3": {
        1: "#000022",
        2: "#2B2D42",
        3: "#485E7B",
        4: "#8D99AE",
        5: "#C2C7CC",
      }
    }
  }
}

Hex values

Color 1#000022

Color 2#2B2D42

Color 3#485E7B

Color 4#8D99AE

Color 5#C2C7CC

Accessibility

Contrast checker

1.5:1Fail

3.1:1AA18

7.1:1AAA

12.1:1AAA

1.5:1Fail

2:1Fail

4.7:1AA

7.9:1AAA

3.1:1AA18

2:1Fail

2.3:1Fail

3.9:1AA18

7.1:1AAA

4.7:1AA

2.3:1Fail

1.7:1Fail

12.1:1AAA

7.9:1AAA

3.9:1AA18

1.7:1Fail

Similar palettes

More like Midnight Star Dust

Midnight Starfall Gaze

Celestial Lanterns

Celestial Night Bloom