Palette

Nebula Dream Dust

Gaze into the ethereal beauty of a distant nebula with this dark yet glowing palette, blending deep space hues with soft light.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1A3A#3A2A5A#5D478B#B86B9E#203040

Palette guide

How to use Nebula Dream Dust

Overview

The Nebula Dream Dust palette invites you to gaze into the ethereal beauty of a distant nebula with its dark yet glowing blend of deep space hues and soft light. Featuring the profound #1F1A3A, the rich #3A2A5A, the sophisticated #5D478B, the inviting #B86B9E, and the grounding #203040, this collection is perfect for designs that aim for a mysterious, elegant, and cosmic feel. Designers can use the darker grays and purples for foundational elements, while the softer pinkish-purple provides a delicate accent. Developers will find this palette excellent for creating luxurious dark-themed interfaces, sophisticated branding, or any digital experience that benefits from a sense of depth and understated allure.

Best used for

Luxury lifestyle blogs
High-end fashion e-commerce
Art and design portfolios
Mysterious event branding
Sophisticated mobile app themes
Cosmic-themed digital illustrations

Suggested color roles

primary

Utilize #1F1A3A as a deep, anchoring background color to establish a sense of depth and mystery.

secondary

Apply #3A2A5A for secondary content areas or large text blocks, offering subtle variation.

accent

Highlight key interactive elements or calls to action with #B86B9E for a soft, inviting glow.

background

The deep #1F1A3A or #203040 provides an excellent dark base, perfect for contrast with lighter text.

text

For optimal readability on these darker shades, use white or a very light gray text.

Accessibility notes

White text on #1F1A3A, #3A2A5A, and #203040 provides excellent contrast and readability.
Ensure sufficient contrast when using #B86B9E for text on #5D478B; test for WCAG AA compliance.
Avoid using #5D478B for small text on #3A2A5A without careful contrast verification.
The #B86B9E shade requires light text (e.g., white) to be highly readable as an accent.

Recommended combinations

Deep Twilight

Creates a subtle, monochromatic dark theme, ideal for minimalist interfaces or backgrounds.

#1F1A3A · #3A2A5A · #203040

Ethereal Spark

Combines deep tones with a soft, glowing accent, perfect for hero sections or key information.

#1F1A3A · #5D478B · #B86B9E

Mystic Veil

Offers a gradient-like blend of purples and pink, suitable for elegant data visualizations or artistic elements.

#3A2A5A · #5D478B · #B86B9E

CSS variables

:root {
  --nebula-dream-dust-1: #1F1A3A;
  --nebula-dream-dust-2: #3A2A5A;
  --nebula-dream-dust-3: #5D478B;
  --nebula-dream-dust-4: #B86B9E;
  --nebula-dream-dust-5: #203040;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-dream-dust": {
        1: "#1F1A3A",
        2: "#3A2A5A",
        3: "#5D478B",
        4: "#B86B9E",
        5: "#203040",
      }
    }
  }
}

Hex values

Color 1#1F1A3A

Color 2#3A2A5A

Color 3#5D478B

Color 4#B86B9E

Color 5#203040

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

4.4:1AA18

1.2:1Fail

1.3:1Fail

1.7:1Fail

3.4:1AA18

1.1:1Fail

2.2:1Fail

1.7:1Fail

2.1:1Fail

1.8:1Fail

4.4:1AA18

3.4:1AA18

2.1:1Fail

3.6:1AA18

1.2:1Fail

1.1:1Fail

1.8:1Fail

3.6:1AA18

Similar palettes

More like Nebula Dream Dust

View all dark

Cosmic Stardust Drift