Palette

Cosmic Drift Dust

Deep purples and cosmic blues that mirror the enigmatic dust clouds drifting in space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Drift 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 Cosmic Drift Dust.

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

Data visualization

#1F0033#3A0066#5C0099#8300CC#A733FF

Palette guide

How to use Cosmic Drift Dust

Overview

The Cosmic Drift Dust palette features deep purples and cosmic blues that mirror the enigmatic dust clouds drifting in space. With shades like the intense #1F0033, the rich #3A0066, and the luminous #A733FF, this collection offers a dark, mystical, and deeply engaging aesthetic. Designers can leverage the strong contrast between the deep base colors and the vibrant lighter tones to create striking visual hierarchies. Developers will find these hex codes ideal for crafting immersive digital experiences, from sophisticated dark mode interfaces to evocative website themes, ensuring a visually rich and engaging user journey that conveys depth and cosmic wonder across various digital platforms.

Best used for

Luxury dark mode UI/UX design
Mystical or fantasy game interfaces
High-end event or brand identity
Digital art with deep space themes
E-commerce for unique artisanal products
Fashion editorial layouts with an elegant, dark edge

Suggested color roles

primary

Designate #1F0033 as a profound primary, ideal for main backgrounds, commanding headers, or foundational brand elements.

secondary

Utilize #3A0066 as a rich secondary, excellent for subheadings, navigation, or larger background sections to add depth.

accent

Apply #A733FF as a vibrant accent, perfect for interactive elements, icons, or highlights that need to draw attention.

background

The deep #1F0033 provides an immersive dark canvas. Alternatively, #5C0099 can serve as a slightly lighter dark background.

text

White or a very light gray provides excellent contrast on #1F0033, #3A0066, and #5C0099. Use white text for #8300CC and #A733FF.

Accessibility notes

Ensure white text on #1F0033, #3A0066, and #5C0099 meets WCAG AA contrast standards for readability.
Avoid pairing #8300CC and #A733FF for small text due to their close values and potential low contrast; reserve for larger graphics.
The vibrant #A733FF provides excellent contrast against the darker shades for calls-to-action.
For body text, ensure a strong contrast against any background, defaulting to white on darks or black on very light backgrounds (if applicable).

Recommended combinations

Cosmic Depths

Combine the deepest shades for a profound background with a vibrant purple for striking text or key UI elements.

#1F0033 · #3A0066 · #A733FF

Dust Cloud Flow

Create smooth gradients or layered effects in UI design, mimicking the atmospheric transition of cosmic dust.

#3A0066 · #5C0099 · #8300CC

Mystic Accent

Use #1F0033 as a dark background, #A733FF for primary highlights, and #5C0099 for secondary information or interactive elements.

#1F0033 · #A733FF · #5C0099

CSS variables

:root {
  --cosmic-drift-dust-3-1: #1F0033;
  --cosmic-drift-dust-3-2: #3A0066;
  --cosmic-drift-dust-3-3: #5C0099;
  --cosmic-drift-dust-3-4: #8300CC;
  --cosmic-drift-dust-3-5: #A733FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-drift-dust-3": {
        1: "#1F0033",
        2: "#3A0066",
        3: "#5C0099",
        4: "#8300CC",
        5: "#A733FF",
      }
    }
  }
}

Hex values

Color 1#1F0033

Color 2#3A0066

Color 3#5C0099

Color 4#8300CC

Color 5#A733FF

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.6:1Fail

4.1:1AA18

1.2:1Fail

1.4:1Fail

2.1:1Fail

3.3:1AA18

1.7:1Fail

1.4:1Fail

1.5:1Fail

2.4:1Fail

2.6:1Fail

2.1:1Fail

1.5:1Fail

1.6:1Fail

4.1:1AA18

3.3:1AA18

2.4:1Fail

1.6:1Fail

Similar palettes

More like Cosmic Drift Dust

View all dark

Celestial Lanterns

Celestial Shimmer Glow

Cosmic Dream Dust

Cosmic Dreamscape Dust

Cosmic Dust Glow

Dark Galaxy Nebula