Back to palettes

Palette

Stellar Night Bloom

The deep, enigmatic hues of a midnight sky, dotted with distant, twinkling stars.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stellar Night Bloom 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 Stellar Night Bloom.

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

Data visualization

#000033#1A004D#330066#4C0080#CCEEFF

Palette guide

How to use Stellar Night Bloom

Overview

The Stellar Night Bloom palette captures the profound mystery of a midnight sky, blending deep blues and purples with a single, striking light accent. Starting with the almost black #000033, it progresses through rich indigos like #1A004D, #330066, and #4C0080, culminating in the luminous #CCEEFF. This palette is expertly crafted for designers and developers seeking to create immersive, serene, and sophisticated digital experiences. It’s perfect for evoking a sense of calm, depth, and starlit wonder, making it ideal for night mode applications or designs that require a touch of elegance and gravitas.

Best used for

  • Night mode application interfaces
  • Astronomy and space-themed websites
  • Mysterious and elegant branding
  • Art installations and digital art
  • Luxury product presentations
  • Dark UI dashboards

Suggested color roles

primary

Utilize #000033 as the foundational background color for main sections, creating a deep, immersive canvas.

secondary

Employ #1A004D for secondary panels, cards, or subtle dividers, offering a nuanced separation.

accent

Apply #CCEEFF as a brilliant accent for interactive elements, highlights, or important data points, ensuring high visibility.

background

The profound #000033 is the ideal background for a truly dark and sophisticated aesthetic, like a clear night sky.

text

For primary text on dark backgrounds, use #CCEEFF or white for excellent legibility. For secondary text, #4C0080 offers a subtle contrast.

Accessibility notes

  • Ensure high contrast for all text elements, especially when using #4C0080 on #330066, which might require larger font sizes.
  • Verify that interactive elements with #CCEEFF have clear focus states against the dark backgrounds.
  • Avoid using very dark shades for small text or icons without sufficient contrast from the background.
  • Test text legibility on various screen types and lighting conditions to maintain comfort and clarity.

Recommended combinations

Midnight Sky

Perfect for main content areas, providing a deep background with clear, starlit text and accents.

#000033 · #1A004D · #CCEEFF

Stellar Bloom

Excellent for creating subtle depth and hierarchy in secondary UI elements or progressive disclosure.

#1A004D · #330066 · #4C0080

Cosmic Twinkle

Great for prominent headings, calls-to-action, or hero sections that demand attention against a dark canvas.

#000033 · #4C0080 · #CCEEFF

CSS variables

:root {
  --stellar-night-bloom-1: #000033;
  --stellar-night-bloom-2: #1A004D;
  --stellar-night-bloom-3: #330066;
  --stellar-night-bloom-4: #4C0080;
  --stellar-night-bloom-5: #CCEEFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-night-bloom": {
        1: "#000033",
        2: "#1A004D",
        3: "#330066",
        4: "#4C0080",
        5: "#CCEEFF",
      }
    }
  }
}

Related searches

deep night sky palettedark blue purple colorsstarlight theme UImysterious cosmic brandingnavy indigo design

Palette colors

Hex values

Color 1#000033
·
Color 2#1A004D
·
Color 3#330066
·
Color 4#4C0080
·
Color 5#CCEEFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.5:1Fail
16.5:1AAA
2
1.1:1Fail
1.2:1Fail
1.4:1Fail
15:1AAA
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
12.9:1AAA
4
1.5:1Fail
1.4:1Fail
1.2:1Fail
10.6:1AAA
5
16.5:1AAA
15:1AAA
12.9:1AAA
10.6:1AAA

Similar palettes

More like Stellar Night Bloom

View all dark
Galactic Star Dust
Starry Night Horizon
City Neon Rain
Cosmic Abyss Echo
Cosmic Abyss Gaze
Cosmic Night Bloom