Palette

Midnight Star Dust

A deep and mysterious array of grays and purples, evoking the infinite depths of a starlit 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

#2B2C42#4D5061#686B7E#A3A6B4#1A1B29

Palette guide

How to use Midnight Star Dust

Overview

The Midnight Star Dust palette offers a sophisticated blend of deep grays and subtle purples, perfect for creating an elegant and mysterious aesthetic. Featuring a rich base of #1A1B29, it transitions through mid-tones like #2B2C42 and #4D5061, culminating in the soft luminosity of #A3A6B4. This collection is ideal for designers seeking a refined, understated dark theme that evokes cosmic depths and quiet luxury. Developers will find these muted, harmonious shades excellent for dark mode interfaces, ensuring readability without harsh contrasts. It's a versatile palette for projects requiring a sense of depth and modern elegance.

Best used for

Luxury brand websites and apps
High-end editorial design
Corporate presentations and dashboards
Sci-fi or fantasy game UI
Elegant event invitations
Night mode interfaces for productivity tools

Suggested color roles

primary

Use #1A1B29 as the foundational dark background for a deep, immersive feel, providing a canvas for lighter elements.

secondary

Apply #2B2C42 for major UI elements, section backgrounds, or secondary headers, offering a subtle contrast to the primary dark.

accent

Utilize #A3A6B4 for interactive elements, highlights, or subtle graphic accents to draw attention and add a touch of clarity.

background

The deepest #1A1B29 or #2B2C42 creates a profound and sophisticated backdrop, ideal for dark themes.

text

For optimal readability on dark backgrounds, use #A3A6B4 for body text. For headings, #686B7E provides a softer, elegant choice.

Accessibility notes

Ensure sufficient contrast when pairing #686B7E with #4D5061; consider increasing text size.
Use #A3A6B4 for body text on #1A1B29 or #2B2C42 to meet WCAG AA standards.
Avoid using #4D5061 directly on #686B7E for critical information due to low contrast.
When using lighter backgrounds, pair with a dark charcoal text like #1A1B29 for best results.

Recommended combinations

Deep Cosmic

Ideal for main page layouts, combining a deep base with a mid-tone and a clear, readable light accent.

#1A1B29 · #2B2C42 · #A3A6B4

Muted Depth

Perfect for subtle layering in UI elements, card backgrounds, or secondary content sections, offering gentle visual separation.

#2B2C42 · #4D5061 · #686B7E

Stardust Highlight

Use for calls-to-action or emphasized text against a dark background, ensuring the light color pops effectively.

#1A1B29 · #A3A6B4 · #4D5061

CSS variables

:root {
  --midnight-star-dust-5-1: #2B2C42;
  --midnight-star-dust-5-2: #4D5061;
  --midnight-star-dust-5-3: #686B7E;
  --midnight-star-dust-5-4: #A3A6B4;
  --midnight-star-dust-5-5: #1A1B29;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-dust-5": {
        1: "#2B2C42",
        2: "#4D5061",
        3: "#686B7E",
        4: "#A3A6B4",
        5: "#1A1B29",
      }
    }
  }
}

Hex values

Color 1#2B2C42

Color 2#4D5061

Color 3#686B7E

Color 4#A3A6B4

Color 5#1A1B29

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

5.6:1AA

1.3:1Fail

1.7:1Fail

1.5:1Fail

3.3:1AA18

2.1:1Fail

2.6:1Fail

1.5:1Fail

2.2:1Fail

3.2:1AA18

5.6:1AA

3.3:1AA18

2.2:1Fail

7:1AAA

1.3:1Fail

2.1:1Fail

3.2:1AA18

7:1AAA

Similar palettes

More like Midnight Star Dust

View all dark

Cosmic Starlight Gaze

Midnight Star Gaze

Midnight Star Trail

Midnight Star Veil

Midnight Starfall Void

Nebula Dream Dust