Back to palettes

Palette

Astral Dust Whisper

A mysterious deep-space palette, capturing the subtle, muted colors of distant astral dust clouds in the void.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Astral Dust Whisper 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 Astral Dust Whisper.

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

Data visualization

#0a0a2a#1a1a3a#2a2a4a#3a3a5a#4a4a6a

Palette guide

How to use Astral Dust Whisper

Overview

The Astral Dust Whisper palette is a mysterious deep-space collection, capturing the subtle, muted colors of distant astral dust clouds in the void. It features a harmonious gradient of dark blue-purples, from the profound #0a0a2a, through #1a1a3a, #2a2a4a, and #3a3a5a, to the lightest shade of #4a4a6a. This abstract and cosmic palette is ideal for designers and developers creating dark mode themes, sci-fi interfaces, or any project requiring a subtle, ethereal, and immersive background. Its understated tones provide a sophisticated backdrop, allowing bright elements to softly glow.

Best used for

  • Dark mode application themes
  • Abstract digital art backgrounds
  • Sci-fi user interfaces
  • Cosmic branding and visuals
  • Ambient music visualizers
  • Subtle background textures

Suggested color roles

primary

#0a0a2a serves as the deepest, foundational dark primary, ideal for main backgrounds and container elements.

secondary

#1a1a3a provides supportive depth, excellent for secondary panels or subtle UI differentiation.

accent

#3a3a5a offers a subtle glow, perfect for delicate accents, hover states, or interactive element borders.

background

#0a0a2a creates an immersive dark background, providing a canvas for celestial elements to softly emerge.

text

#4a4a6a ensures optimal readability for text on the dark primary background, or use a crisp white for critical information.

Accessibility notes

  • Critical to ensure sufficient contrast for text on dark backgrounds, using #4a4a6a or white.
  • Avoid using similar dark shades for interactive elements without clear visual differentiation.
  • Test for low-vision users, as the subtle differences between shades might be hard to perceive.
  • Ensure sufficient contrast for links and interactive elements, possibly using a brighter accent from another palette if necessary.

Recommended combinations

Void Depth

A core dark mode combination, offering deep contrast and clear readability for primary content.

#0A0A2A · #1A1A3A · #4A4A6A

Subtle Glow

Creates a nuanced, layered effect, ideal for secondary information panels or atmospheric UI components.

#2A2A4A · #3A3A5A · #0A0A2A

Cosmic Whisper

Perfect for subtle gradients or layered elements, evoking the vastness of space with understated elegance.

#1A1A3A · #3A3A5A · #4A4A6A

CSS variables

:root {
  --astral-dust-whisper-1: #0a0a2a;
  --astral-dust-whisper-2: #1a1a3a;
  --astral-dust-whisper-3: #2a2a4a;
  --astral-dust-whisper-4: #3a3a5a;
  --astral-dust-whisper-5: #4a4a6a;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-dust-whisper": {
        1: "#0a0a2a",
        2: "#1a1a3a",
        3: "#2a2a4a",
        4: "#3a3a5a",
        5: "#4a4a6a",
      }
    }
  }
}

Related searches

deep space purpledark abstract palettecosmic dust colorssubtle sci-fi UIdark mode purple

Palette colors

Hex values

Color 1#0a0a2a
·
Color 2#1a1a3a
·
Color 3#2a2a4a
·
Color 4#3a3a5a
·
Color 5#4a4a6a
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.8:1Fail
2.3:1Fail
2
1.1:1Fail
1.2:1Fail
1.5:1Fail
2:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.6:1Fail
4
1.8:1Fail
1.5:1Fail
1.3:1Fail
1.3:1Fail
5
2.3:1Fail
2:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Astral Dust Whisper

View all dark