Palette

Nebula Haze Glow

Whispers of distant galaxies, with deep purples and lavenders softly trailing through space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nebula Haze Glow 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 Haze Glow.

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

Data visualization

#1A0F2B#3E2B5C#6C4CA8#A48ED4#D7C6EB

Palette guide

How to use Nebula Haze Glow

Overview

The Nebula Haze Glow palette emanates the serene beauty of distant galaxies, featuring a spectrum of deep purples and soft lavenders. It begins with the profound #1A0F2B, transitioning through the rich #3E2B5C and the more vibrant #6C4CA8. The journey concludes with the ethereal #A48ED4 and the delicate #D7C6EB, evoking a sense of calm and cosmic wonder. This palette is perfect for designers seeking to create sophisticated, dreamlike interfaces, elegant branding, or immersive digital experiences that whisper of mystery and grace. Its harmonious flow ensures visual appeal and versatility across various design applications.

Best used for

Dreamy website backgrounds and hero sections
Artistic portfolio sites
Meditation or sleep aid apps
High-end cosmetic or fragrance branding
Ethereal digital art and illustrations
Sophisticated event invitations

Suggested color roles

primary

#1A0F2B - The deepest purple, serving as a solid, atmospheric base for large backgrounds, footers, or primary structural elements, anchoring the design.

secondary

#3E2B5C - A rich, dark purple, excellent for secondary content panels, navigation, or subtle dividers, adding depth without heaviness.

accent

#6C4CA8 - A vibrant, captivating purple, ideal for calls-to-action, interactive elements, or key highlights that demand attention with an elegant flair.

background

#1A0F2B - Use this profound shade as the primary backdrop to establish a dark, dreamy, and sophisticated atmosphere, allowing lighter elements to softly glow.

text

#D7C6EB - For primary body text and headlines, providing excellent readability against the darker tones while maintaining the palette's gentle, luminous feel. A pure white can offer even stronger contrast.

Accessibility notes

Ensure #D7C6EB text on #1A0F2B or #3E2B5C backgrounds meets WCAG AA contrast ratios.
Avoid using #A48ED4 for small text on #6C4CA8 as contrast may be insufficient.
#6C4CA8 can be used for interactive elements, but pair with white or #D7C6EB text for clarity.
Prioritize larger font sizes for text elements using mid-tone colors like #A48ED4 on slightly darker backgrounds.

Recommended combinations

Deep Cosmos

Ideal for dark mode UI, with the darkest as background and lightest for primary content.

#1A0F2B · #3E2B5C · #D7C6EB

Lavender Haze

Create elegant gradients for hero sections or layered visual effects, capturing a soft transition.

#3E2B5C · #6C4CA8 · #A48ED4

Ethereal Pop

Use the deepest purple as background, #6C4CA8 for headings or buttons, and #D7C6EB for body text.

#1A0F2B · #6C4CA8 · #D7C6EB

CSS variables

:root {
  --nebula-haze-glow-1: #1A0F2B;
  --nebula-haze-glow-2: #3E2B5C;
  --nebula-haze-glow-3: #6C4CA8;
  --nebula-haze-glow-4: #A48ED4;
  --nebula-haze-glow-5: #D7C6EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-haze-glow": {
        1: "#1A0F2B",
        2: "#3E2B5C",
        3: "#6C4CA8",
        4: "#A48ED4",
        5: "#D7C6EB",
      }
    }
  }
}

Hex values

Color 1#1A0F2B

Color 2#3E2B5C

Color 3#6C4CA8

Color 4#A48ED4

Color 5#D7C6EB

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

6.4:1AA

11.5:1AAA

1.5:1Fail

1.9:1Fail

4.3:1AA18

7.7:1AAA

2.8:1Fail

1.9:1Fail

2.3:1Fail

4.1:1AA18