Palette

Cosmic Drift Dust

A profound journey through deep purples and indigos, mirroring the enigmatic vastness of cosmic dust.

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

#1D0230#3D075F#7A24A6#B252E0#0F011E

Palette guide

How to use Cosmic Drift Dust

Overview

The Cosmic Drift Dust palette embarks on a profound journey through deep purples and indigos, mirroring the enigmatic vastness of cosmic dust. Featuring shades like the intense #1D0230, the rich #3D075F, and the vibrant #B252E0, this collection offers a dark, mystical, and deeply engaging aesthetic. Designers can leverage the strong contrast between the deep base colors and the luminous 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 #1D0230 as a profound primary, ideal for main backgrounds, commanding headers, or foundational brand elements.

secondary

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

accent

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

background

The deep #0F011E provides an immersive dark canvas. Alternatively, #7A24A6 can serve as a slightly lighter dark background.

text

White or a very light gray provides excellent contrast on #1D0230, #3D075F, and #0F011E. Use white text for #7A24A6 and #B252E0.

Accessibility notes

Ensure white text on #1D0230, #3D075F, and #0F011E meets WCAG AA contrast standards for readability.
Avoid pairing #7A24A6 and #B252E0 for small text due to their close values and potential low contrast; reserve for larger graphics.
The vibrant #B252E0 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 Void

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

#0F011E · #1D0230 · #B252E0

Drifting Hues

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

#1D0230 · #3D075F · #7A24A6

Mystic Accent

Use #0F011E as a dark background, #B252E0 for primary highlights, and #3D075F for secondary information or interactive elements.

#0F011E · #B252E0 · #3D075F

CSS variables

:root {
  --cosmic-drift-dust-2-1: #1D0230;
  --cosmic-drift-dust-2-2: #3D075F;
  --cosmic-drift-dust-2-3: #7A24A6;
  --cosmic-drift-dust-2-4: #B252E0;
  --cosmic-drift-dust-2-5: #0F011E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-drift-dust-2": {
        1: "#1D0230",
        2: "#3D075F",
        3: "#7A24A6",
        4: "#B252E0",
        5: "#0F011E",
      }
    }
  }
}

Hex values

Color 1#1D0230

Color 2#3D075F

Color 3#7A24A6

Color 4#B252E0

Color 5#0F011E

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

4.7:1AA

1.1:1Fail

1.3:1Fail

1.9:1Fail

3.7:1AA18

1.3:1Fail

2.4:1Fail

1.9:1Fail

2:1Fail

2.5:1Fail

4.7:1AA

3.7:1AA18

2:1Fail

5:1AA

1.1:1Fail

1.3:1Fail

2.5:1Fail

5:1AA

Similar palettes

More like Cosmic Drift Dust

Cosmic Drift Dust

See it in context.

Ready when you are.

Built with Cosmic Drift Dust.

How to use Cosmic Drift Dust

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cosmic Void

Drifting Hues

Mystic Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cosmic Drift Dust