Back to palettes

Palette

Midnight Star Gaze

Deep, profound blues and greys, reflecting the quiet awe of gazing upon stars in a midnight sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#1C1C2C#33334D#4A4A66#626280

Palette guide

How to use Midnight Star Gaze

Overview

The Midnight Star Gaze palette offers a refined progression of deep, cool grays with subtle blue undertones, creating a tranquil and sophisticated dark aesthetic. Beginning with the profound #0A0A0A, it elegantly transitions through #1C1C2C and #33334D, reaching the softest tone of #626280. This collection is ideal for designers and developers crafting immersive dark mode interfaces, luxury branding, or any project requiring a sense of calm, depth, and understated elegance. Its monochromatic nature ensures harmony and focus, making content stand out without overwhelming the user.

Best used for

  • Dark mode UI for productivity apps
  • Luxury lifestyle branding
  • Editorial and content-heavy websites
  • Atmospheric video game interfaces
  • Scientific or technical dashboards
  • Minimalist web design

Suggested color roles

primary

Designate #0A0A0A as the ultimate background color for a profound, immersive dark theme.

secondary

Employ #1C1C2C for main content areas or card backgrounds, providing a subtle layer above the darkest base.

accent

Use #626280 sparingly for subtle highlights, interactive states, or delicate icon outlines to maintain elegance.

background

The deep #0A0A0A is excellent for full-screen backgrounds, while #1C1C2C works well for section backgrounds.

text

For optimal readability on dark backgrounds, use #626280 for body text. For headings, a crisp white or near-white like #F0F0F0 provides good contrast.

Accessibility notes

  • Crucially, ensure #626280 text on #0A0A0A or #1C1C2C meets minimum contrast ratios for body text.
  • Avoid using #33334D directly on #1C1C2C for small text, as contrast may be insufficient.
  • Consider using a bright white or very light gray text for critical information on the darker shades.
  • For decorative elements, the mid-tones like #4A4A66 can work together, but prioritize readability for text.

Recommended combinations

Dark Base

Creates a strong foundational dark theme, with the lightest color providing clear readability for text.

#0A0A0A · #1C1C2C · #626280

Subtle Gradient

Ideal for layered UI elements, card backgrounds, or subtle depth effects within a dark interface.

#1C1C2C · #33334D · #4A4A66

Contrast Pair

Use for header text and sub-headers, where #626280 provides strong contrast and #33334D offers a softer accent.

#0A0A0A · #626280 · #33334D

CSS variables

:root {
  --midnight-star-gaze-1: #0A0A0A;
  --midnight-star-gaze-2: #1C1C2C;
  --midnight-star-gaze-3: #33334D;
  --midnight-star-gaze-4: #4A4A66;
  --midnight-star-gaze-5: #626280;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-gaze": {
        1: "#0A0A0A",
        2: "#1C1C2C",
        3: "#33334D",
        4: "#4A4A66",
        5: "#626280",
      }
    }
  }
}

Related searches

dark blue gray palettesubtle night themecosmic dark UIminimalist dark colorselegant deep grays

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C2C
·
Color 3#33334D
·
Color 4#4A4A66
·
Color 5#626280
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.3:1Fail
3.4:1AA18
2
1.2:1Fail
1.4:1Fail
2:1Fail
2.9:1Fail
3
1.6:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
4
2.3:1Fail
2:1Fail
1.4:1Fail
1.5:1Fail
5
3.4:1AA18
2.9:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Midnight Star Gaze

View all dark
Midnight Star Dust
Midnight Star Veil
Midnight Starfall Void
Asteroid Drift Grey
Astral Dust Whisper
Celestial Dust Swirl