Palette

Midnight Stellar Depth

Plunging into the profound darkness of deep space, accented by faint starlight and distant nebulae.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Stellar Depth 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 Stellar Depth.

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

Data visualization

#0F0F1A#282845#4A4A7A#7575AE#A0A0E0

Palette guide

How to use Midnight Stellar Depth

Overview

The Midnight Stellar Depth palette offers a profound journey into the cosmos, perfect for designs seeking a dark, serene, and elegant aesthetic. Dominated by deep blues and purples, it evokes distant galaxies and starlight. Key colors like the anchor #0F0F1A provide an expansive dark canvas, while #4A4A7A introduces a mid-tone depth, and #A0A0E0 delivers a luminous, ethereal glow. This palette is ideal for creating immersive experiences, from digital interfaces to artistic visualizations, ensuring a sophisticated and tranquil mood.

Best used for

Science fiction game interfaces
Luxury brand websites
Astronomical photography portfolios
Dark mode UI/UX designs
Digital art and illustration
Meditation or sleep aid apps

Suggested color roles

primary

Use #0F0F1A as the dominant background color to establish a deep, infinite space, perfect for large sections and immersive backdrops.

secondary

Apply #282845 for supporting elements like card backgrounds, subtle containers, or section dividers to add depth without harsh contrast.

accent

Highlight interactive elements, key data points, or subtle glows with #A0A0E0, providing a luminous focal point.

background

Utilize #0F0F1A as the primary canvas for a truly dark and sophisticated foundation.

text

For optimal readability on dark backgrounds, use #A0A0E0 or #7575AE for main text, and a slightly darker shade like #4A4A7A for secondary or less critical information.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #A0A0E0 or #7575AE with darker backgrounds such as #0F0F1A for text legibility.
Avoid using #282845 or #4A4A7A for small text on #0F0F1A, as contrast may be insufficient for WCAG AA compliance.
Use #A0A0E0 for primary text on the darkest backgrounds for maximum readability.
Consider larger font sizes or bolder weights for text using mid-tone colors like #7575AE on darker blues.

Recommended combinations

Deep Space Base

Establishes a foundational dark blue environment for backgrounds and primary content areas.

#0F0F1A · #282845 · #4A4A7A

Stellar Contrast

Ideal for creating strong visual hierarchy with light text and accents against a deep, dark backdrop.

#0F0F1A · #A0A0E0 · #7575AE

Subtle Gradient

Perfect for smooth transitions, progress bars, or illustrative elements that require a gentle shift in tone.

#282845 · #4A4A7A · #7575AE

CSS variables

:root {
  --midnight-stellar-depth-1: #0F0F1A;
  --midnight-stellar-depth-2: #282845;
  --midnight-stellar-depth-3: #4A4A7A;
  --midnight-stellar-depth-4: #7575AE;
  --midnight-stellar-depth-5: #A0A0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-stellar-depth": {
        1: "#0F0F1A",
        2: "#282845",
        3: "#4A4A7A",
        4: "#7575AE",
        5: "#A0A0E0",
      }
    }
  }
}

Hex values

Color 1#0F0F1A

Color 2#282845

Color 3#4A4A7A

Color 4#7575AE

Color 5#A0A0E0

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

4.5:1AA18

7.8:1AAA

1.3:1Fail

1.7:1Fail

3.3:1AA18

5.8:1AA

2.3:1Fail

1.7:1Fail

1.9:1Fail

3.4:1AA18

4.5:1AA18

3.3:1AA18

1.9:1Fail

1.8:1Fail

7.8:1AAA

5.8:1AA

3.4:1AA18

1.8:1Fail

Similar palettes

More like Midnight Stellar Depth

View all dark

Cosmic Abyss Echo

Deep Space Abyss

Deep Space Constellation

Abyss Gaze

Abyssal Bioluminescent Glow

Abyssal Coral Glow