Palette

Nebula Dream Drift

An ethereal blend of deep purples and blues, with gentle stardust accents, evoking distant nebulae.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000022#4B0082#8A2BE2#ADD8E6#FFF0F5

Palette guide

How to use Nebula Dream Drift

Overview

The Nebula Dream Drift palette is an ethereal blend of deep purples and blues, accented with gentle stardust hues, evoking distant nebulae. Featuring the profound #000022, the rich #4B0082, the vibrant #8A2BE2, the serene #ADD8E6, and the soft #FFF0F5, this collection is perfect for designs that aim to be both sophisticated and dreamlike. Designers can use the deep blues for foundational elements, while the lighter purples and near-white provide sparkling accents. Developers will find this palette excellent for creating elegant user interfaces, dreamy backgrounds, or any digital experience that benefits from a sense of wonder and calm. It's a versatile choice for a touch of cosmic elegance.

Best used for

E-commerce sites for luxury goods
Spiritual and wellness applications
High-end wedding invitations
Abstract art and photography
Brand identity for creative agencies
Elegant personal portfolios

Suggested color roles

primary

Utilize #000022 as a deep, anchoring background, creating a vast and mysterious canvas.

secondary

Apply #4B0082 for major sections or sophisticated headers, adding depth and richness.

accent

Highlight interactive elements or key information with #8A2BE2 for a vibrant, yet harmonious, pop.

background

The profound #000022 creates an immersive, dark background, ideal for showcasing content.

text

For dark backgrounds, use white or #FFF0F5 for optimal readability. For lighter elements, black or charcoal is suitable.

Accessibility notes

White or #FFF0F5 text on #000022 and #4B0082 provides excellent contrast and readability.
Ensure sufficient contrast when using #ADD8E6 for text on #FFF0F5, as they are very close in lightness.
Avoid using #ADD8E6 for small text on #8A2BE2; test for WCAG AA compliance.
Consider darker text (e.g., charcoal) for #ADD8E6 if used as a background for body copy.

Recommended combinations

Cosmic Horizon

Creates a deep-to-light transition, suitable for website hero sections or app onboarding.

#000022 · #4B0082 · #ADD8E6

Stardust Glow

Generates a soft, ethereal glow, perfect for delicate accents, icons, or background textures.

#8A2BE2 · #ADD8E6 · #FFF0F5

Deep Reverie

Provides strong contrast and elegance, ideal for impactful headings or call-to-action buttons.

#000022 · #8A2BE2 · #FFF0F5

CSS variables

:root {
  --nebula-dream-drift-1: #000022;
  --nebula-dream-drift-2: #4B0082;
  --nebula-dream-drift-3: #8A2BE2;
  --nebula-dream-drift-4: #ADD8E6;
  --nebula-dream-drift-5: #FFF0F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-dream-drift": {
        1: "#000022",
        2: "#4B0082",
        3: "#8A2BE2",
        4: "#ADD8E6",
        5: "#FFF0F5",
      }
    }
  }
}

Hex values

Color 1#000022

Color 2#4B0082

Color 3#8A2BE2

Color 4#ADD8E6

Color 5#FFF0F5

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

13.4:1AAA

18.6:1AAA

1.6:1Fail

2.2:1Fail

8.5:1AAA

11.7:1AAA

3.4:1AA18

2.2:1Fail

3.9:1AA18

5.4:1AA

13.4:1AAA

8.5:1AAA

3.9:1AA18

1.4:1Fail

18.6:1AAA

11.7:1AAA

5.4:1AA

1.4:1Fail

Similar palettes

More like Nebula Dream Drift

View all vibrant

Celestial Nebula Hues

Cosmic Nebulae Dream

Astral Nebula Bloom

Cosmic Aurora Shimmer

Cosmic Bloom Nebula

Cosmic Glow Dust