Palette

Starlight Nebula Dream

Deep blues fading into ethereal violets portray the distant, swirling beauty of a starlight nebula.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Nebula Dream 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 Starlight Nebula Dream.

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

Data visualization

#0F0F2A#2B2B5C#5C5CB4#A3A3E0#E0E0FF

Palette guide

How to use Starlight Nebula Dream

Overview

The Starlight Nebula Dream palette transports users to a serene cosmic landscape, blending deep blues with ethereal violets. This dark, yet inviting, scheme is perfect for projects aiming for a sophisticated and tranquil feel. Starting with the profound depth of #0F0F2A, it transitions through the rich indigo of #2B2B5C and the vibrant violet of #5C5CB4. The journey continues to the soft lavender of #A3A3E0, culminating in the near-white luminescence of #E0E0FF. Designers can leverage this progression for creating visual hierarchies, from dark backgrounds to luminous highlights. Developers will find these hex codes ideal for crafting immersive UI elements, striking hero sections, or elegant data visualizations that require a dreamy, celestial touch. Its harmonious flow ensures a cohesive and visually pleasing user experience.

Best used for

High-end website backgrounds or hero sections
Sci-fi game UI and environment art
Luxury brand digital presentations
Night sky photography portfolios
Meditation or sleep aid app interfaces
Elegant event invitations or digital flyers

Suggested color roles

primary

Utilize #0F0F2A as the dominant background color for a deep, immersive space, or for large content blocks that require a strong, stable foundation.

secondary

Apply #2B2B5C for secondary backgrounds, navigation elements, or prominent card headers, providing depth while maintaining readability against lighter text.

accent

Highlight key interactive elements, call-to-action buttons, or important data points with #5C5CB4, offering a vibrant focal point that draws attention.

background

The darkest shade, #0F0F2A, serves as an excellent base for a truly dark mode or celestial theme. For lighter backgrounds, #E0E0FF can provide a clean, ethereal canvas.

text

For dark backgrounds like #0F0F2A or #2B2B5C, use #E0E0FF or #A3A3E0 for primary text to ensure high readability. On lighter backgrounds like #E0E0FF, a dark charcoal or black text is recommended.

Accessibility notes

Ensure #E0E0FF has sufficient contrast against darker blues like #0F0F2A for body text, meeting WCAG AA standards.
Avoid using #A3A3E0 directly on #5C5CB4 for small text; check contrast ratios carefully for optimal readability.
For interactive elements, confirm that the accent color #5C5CB4 provides clear visual distinction against its surrounding background.
Consider using a darker text color (e.g., black or dark gray) for any text placed on the lightest color #E0E0FF.

Recommended combinations

Nebula Gradient

Ideal for smooth background gradients, splash screens, or subtle atmospheric effects in digital interfaces.

#0F0F2A · #2B2B5C · #5C5CB4

Starry Contrast

Excellent for dark mode interfaces where #0F0F2A is the background and #A3A3E0 or #E0E0FF are used for text and highlights.

#0F0F2A · #A3A3E0 · #E0E0FF

Dreamy UI

Suitable for card components, navigation bars, or subtle UI elements that need a distinct yet harmonious feel.

#2B2B5C · #5C5CB4 · #A3A3E0

CSS variables

:root {
  --starlight-nebula-dream-1: #0F0F2A;
  --starlight-nebula-dream-2: #2B2B5C;
  --starlight-nebula-dream-3: #5C5CB4;
  --starlight-nebula-dream-4: #A3A3E0;
  --starlight-nebula-dream-5: #E0E0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-nebula-dream": {
        1: "#0F0F2A",
        2: "#2B2B5C",
        3: "#5C5CB4",
        4: "#A3A3E0",
        5: "#E0E0FF",
      }
    }
  }
}

Hex values

Color 1#0F0F2A

Color 2#2B2B5C

Color 3#5C5CB4

Color 4#A3A3E0

Color 5#E0E0FF

Accessibility

Contrast checker

1.4:1Fail

3.2:1AA18

7.9:1AAA

14.5:1AAA

1.4:1Fail

2.3:1Fail

5.5:1AA

10.2:1AAA

3.2:1AA18

2.3:1Fail

2.4:1Fail

4.5:1AA18

7.9:1AAA

5.5:1AA

2.4:1Fail

1.8:1Fail

14.5:1AAA

10.2:1AAA

4.5:1AA18

1.8:1Fail

Similar palettes

More like Starlight Nebula Dream

View all dark

Nebula Whisper Echo

Astral Bloom Vision

Celestial Glimmer Dust

Celestial Sapphire Dust

Celestial Void Gaze

Cosmic Abyss Gaze