Back to palettes

Palette

Nebula Cloud Drift

Dives into the cosmic depths of a far-off nebula, blending dark purples and celestial hues of swirling stardust.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3a0050#5a0070#7a0090#9a00b0#b000d0

Palette guide

How to use Nebula Cloud Drift

Overview

The Nebula Cloud Drift palette offers a celestial journey through deep purples, ideal for evoking mystery and elegance. With shades like the profound #3a0050, the rich #5a0070, and the vibrant #9a00b0, this gradient-focused collection is perfect for digital interfaces requiring a cosmic touch. Designers can leverage the darker tones for backgrounds and the lighter purples, such as #b000d0, for compelling accents or interactive elements. Developers will find these hues create seamless transitions and sophisticated user experiences, especially in space-themed applications or luxury branding. It's a versatile palette for projects aiming for a dark, yet captivating, aesthetic.

Best used for

  • Luxury brand websites and apps
  • Space-themed game interfaces
  • Ethereal digital art and illustrations
  • High-end event invitations
  • Dark mode UI/UX designs
  • Abstract photography backgrounds

Suggested color roles

primary

Use #3a0050 for dominant backgrounds or large sections to establish a deep, mysterious foundation.

secondary

Apply #5a0070 for secondary content areas or significant headings, providing depth without overwhelming.

accent

Highlight interactive elements or key information with #9a00b0 to draw attention effectively.

background

The darkest shade, #3a0050, is excellent for a deep, absorbing background, creating a sense of infinite space.

text

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

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when pairing lighter purples with darker ones.
  • Avoid using #3a0050 for small text on #5a0070; the contrast may be insufficient for accessibility standards.
  • White text on #9a00b0 provides strong contrast for headings and primary content.
  • Use a contrast checker tool to validate pairings of #b000d0 with any text color, especially for body text.

Recommended combinations

Deep Cosmos

Ideal for website hero sections or app onboarding screens, creating an immersive, high-contrast visual.

#3A0050 · #5A0070 · #B000D0

Nebula Gradient

Excellent for subtle gradients in UI elements, background textures, or data visualizations.

#5A0070 · #7A0090 · #9A00B0

Stardust Accent

Effective for dark themes where #3a0050 serves as a base and #b000d0 highlights buttons or icons.

#3A0050 · #9A00B0 · #B000D0

CSS variables

:root {
  --nebula-cloud-drift-1: #3a0050;
  --nebula-cloud-drift-2: #5a0070;
  --nebula-cloud-drift-3: #7a0090;
  --nebula-cloud-drift-4: #9a00b0;
  --nebula-cloud-drift-5: #b000d0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-cloud-drift": {
        1: "#3a0050",
        2: "#5a0070",
        3: "#7a0090",
        4: "#9a00b0",
        5: "#b000d0",
      }
    }
  }
}

Related searches

dark purple color schemecosmic color palettemysterious gradient colorsdeep space ui colorsviolet branding palette

Palette colors

Hex values

Color 1#3a0050
·
Color 2#5a0070
·
Color 3#7a0090
·
Color 4#9a00b0
·
Color 5#b000d0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.3:1Fail
2.9:1Fail
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.3:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.3:1Fail
1.8:1Fail
1.3:1Fail
1.3:1Fail
5
2.9:1Fail
2.3:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Nebula Cloud Drift

View all dark