Palette

Midnight Star Dust

Deep blues and celestial highlights evoke the endless expanse of a star-filled night sky.

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

#1A2E47#3D5A80#98C1D9#E0FBFC#FFD38A

Palette guide

How to use Midnight Star Dust

Overview

The "Midnight Star Dust" palette beautifully captures the awe-inspiring expanse of a star-filled night sky, blending deep blues with celestial highlights. It starts with a grounding dark navy (#1A2E47), moving through a rich, muted blue (#3D5A80). A serene sky blue (#98C1D9) and a shimmering, almost white aqua (#E0FBFC) evoke distant starlight, while a warm, golden yellow (#FFD38A) represents a guiding star or distant nebula. This palette is perfect for designers and developers aiming to create designs that are both mysterious and hopeful, ideal for cosmic, scientific, or inspiring themes.

Best used for

Space exploration or astronomy websites
Sci-fi themed games or applications
Educational content about the universe
Inspirational or aspirational branding
Children's book illustrations (celestial theme)
Tech company branding with a forward-thinking vibe

Suggested color roles

primary

#1A2E47 serves as the deep, anchoring background, creating the vastness of space.

secondary

#3D5A80 is ideal for secondary panels, navigation, or larger text blocks, adding depth without being overwhelming.

accent

#FFD38A is the luminous starburst, perfect for call-to-action buttons, key highlights, or glowing elements that demand attention.

background

#E0FBFC offers a very light, almost ethereal background for content, providing excellent contrast for darker text.

text

For dark backgrounds like #1A2E47, use #E0FBFC or white. For light backgrounds like #E0FBFC, use #1A2E47 or a dark charcoal for optimal readability.

Accessibility notes

Ensure #1A2E47 text on #E0FBFC background meets WCAG AA or AAA contrast.
#3D5A80 provides good contrast for body text on #E0FBFC.
Be cautious using #98C1D9 for small text on #E0FBFC; contrast might be too low.
The accent color #FFD38A needs careful contrast checking, especially if used for text on light backgrounds.

Recommended combinations

Deep Space

Creates a sophisticated dark mode interface, with the lightest blue mimicking distant stars or UI elements.

#1A2E47 · #3D5A80 · #E0FBFC

Cosmic Glow

Ideal for creating vibrant highlights and visual interest against a mid-tone blue, perfect for infographics or data.

#3D5A80 · #98C1D9 · #FFD38A

Stardust Light

Effective for hero sections or landing pages where a dark background dramatically contrasts with bright, celestial accents.

#1A2E47 · #E0FBFC · #FFD38A

CSS variables

:root {
  --midnight-star-dust-2-1: #1A2E47;
  --midnight-star-dust-2-2: #3D5A80;
  --midnight-star-dust-2-3: #98C1D9;
  --midnight-star-dust-2-4: #E0FBFC;
  --midnight-star-dust-2-5: #FFD38A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-dust-2": {
        1: "#1A2E47",
        2: "#3D5A80",
        3: "#98C1D9",
        4: "#E0FBFC",
        5: "#FFD38A",
      }
    }
  }
}

Hex values

Color 1#1A2E47

Color 2#3D5A80

Color 3#98C1D9

Color 4#E0FBFC

Color 5#FFD38A

Accessibility

Contrast checker

1.9:1Fail

7.2:1AAA

12.7:1AAA

9.8:1AAA

1.9:1Fail

3.7:1AA18

6.5:1AA

5:1AA

7.2:1AAA

3.7:1AA18

1.8:1Fail

1.4:1Fail

12.7:1AAA

6.5:1AA

1.8:1Fail

1.3:1Fail

9.8:1AAA

5:1AA

1.4:1Fail

1.3:1Fail

Similar palettes

More like Midnight Star Dust

View all dark

Cosmic Veil Wonder

Midnight Starfall Void

Celestial Dust Swirl

Celestial Night Bloom

Celestial Stardust Trails

Cosmic Deep Slumber