Palette

Nebula Void Drift

A mysterious palette capturing the deep purples and faint light of distant galaxies and nebulae drifting through the cosmos.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nebula Void Drift 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 Void Drift.

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

Data visualization

#1A0A33#4F2C7F#8B4CD3#C0B4F2#E0E0FF

Palette guide

How to use Nebula Void Drift

Overview

The Nebula Void Drift palette embodies the mysterious expanse of the cosmos, featuring deep purples and faint, ethereal lights. It begins with the profound #1A0A33, transitioning through the rich #4F2C7F, and culminating in the vibrant #8B4CD3. The lighter, luminous shades of #C0B4F2 and the near-white #E0E0FF evoke distant starlight and nebulous glows. This palette is ideal for designers crafting sophisticated dark themes, immersive digital experiences, or branding that conveys a sense of cosmic wonder and tranquility. Its harmonious progression ensures visual depth and versatility across diverse design applications, from UI to creative content.

Best used for

Space exploration themed interfaces
Mystical or spiritual website designs
High-tech product launch campaigns
Dark mode UI for productivity apps
Ethereal digital art and abstract illustrations
Luxury personal branding

Suggested color roles

primary

#1A0A33 - The deepest, almost black purple-blue, serving as an expansive, stable base for large backgrounds, headers, or foundational elements, setting a profound, mysterious tone.

secondary

#4F2C7F - A rich, dark purple, excellent for content containers, sidebars, or subtle dividers, adding depth and refinement.

accent

#8B4CD3 - A vibrant and luminous purple-blue, perfect for calls-to-action, interactive elements, or key visual highlights that need to stand out with an ethereal glow.

background

#1A0A33 - Use this profound shade as the main canvas to establish a dark, immersive, and mysterious atmosphere, allowing lighter elements to shimmer like distant galaxies.

text

#E0E0FF - For primary body text and headlines, providing excellent contrast against the darker shades while maintaining the palette's ethereal, starlit quality. Pure white is also a strong option for maximum readability.

Accessibility notes

Ensure #E0E0FF text on #1A0A33 or #4F2C7F backgrounds meets WCAG AA contrast ratios.
Avoid using #C0B4F2 for small text on #8B4CD3 or similar mid-tones due to potential contrast issues.
#8B4CD3 is excellent for accents, but pair with #E0E0FF or white text for optimal readability on interactive elements.
Always test color combinations with accessibility tools, especially when using mid-range purples for text.

Recommended combinations

Cosmic Abyss

Ideal for dark UI, with the darkest for background and lightest for primary text and highlights.

#1A0A33 · #4F2C7F · #E0E0FF

Galaxy Shimmer

Create smooth, atmospheric gradients for hero banners or subtle background effects, evoking depth.

#4F2C7F · #8B4CD3 · #C0B4F2

Ethereal Contrast

Use the deepest color as the main background, #8B4CD3 for headings, and #E0E0FF for body text or important details.

#1A0A33 · #8B4CD3 · #E0E0FF

CSS variables

:root {
  --nebula-void-drift-1: #1A0A33;
  --nebula-void-drift-2: #4F2C7F;
  --nebula-void-drift-3: #8B4CD3;
  --nebula-void-drift-4: #C0B4F2;
  --nebula-void-drift-5: #E0E0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-void-drift": {
        1: "#1A0A33",
        2: "#4F2C7F",
        3: "#8B4CD3",
        4: "#C0B4F2",
        5: "#E0E0FF",
      }
    }
  }
}

Hex values

Color 1#1A0A33

Color 2#4F2C7F

Color 3#8B4CD3

Color 4#C0B4F2

Color 5#E0E0FF

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

9.7:1AAA

14.3:1AAA

1.8:1Fail

2:1Fail

5.5:1AA

8.1:1AAA

3.6:1AA18

2:1Fail

2.7:1Fail

4:1AA18