Palette

Celestial Dust Cloud

Deep and enchanting blues and purples, capturing the ethereal, star-dusted clouds of a distant galaxy.

DarkElegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Dust Cloud 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 Celestial Dust Cloud.

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

Data visualization

#2A2345#4C3D77#766BB0#1C162D#0F0B1E

Palette guide

How to use Celestial Dust Cloud

Overview

The Celestial Dust Cloud palette captures the ethereal, star-dusted clouds of a distant galaxy with deep and enchanting blues and purples. Ranging from the profound #0F0B1E and #1C162D to the rich #2A2345, #4C3D77, and the lighter #766BB0, this collection exudes elegance and mystery. It is perfect for designers and developers aiming to create immersive, sophisticated, and atmospheric digital experiences, branding, or interfaces that evoke the vastness and beauty of the cosmos. Its dark, luxurious tones provide a strong foundation for captivating visuals.

Best used for

High-end technology branding
Sci-fi film or game aesthetics
Luxury event decor and invitations
Astronomy education platforms
Dark mode UI designs
E-commerce for unique, artisanal goods

Suggested color roles

primary

#0F0B1E or #1C162D serve as dominant, deep background colors, establishing a luxurious and mysterious foundation.

secondary

#2A2345 or #4C3D77 are excellent for secondary sections, navigation, or card backgrounds, adding depth and richness.

accent

#766BB0 provides a beautiful, muted highlight for interactive elements, subheadings, or subtle graphic details.

background

A very dark color like #0F0B1E or #1C162D for dark themes, or a near-white for contrast on specific sections.

text

#766BB0 or a near-white text color provides excellent readability against the darker shades.

Accessibility notes

#766BB0 offers good contrast for text on #0F0B1E, #1C162D, #2A2345, and #4C3D77, meeting WCAG AA.
Ensure interactive elements use #766BB0 or a similar light color for clear visibility against dark backgrounds.
Avoid using the darker shades as text colors on each other without sufficient luminance difference.
For content-heavy areas, consider using #766BB0 for body text on a darker background.

Recommended combinations

Cosmic Depth

Ideal for a sophisticated dark mode interface with clear hierarchy.

#0F0B1E · #766BB0 · #4C3D77

Nebula Gradient

Excellent for background gradients, creating a seamless, atmospheric transition.

#1C162D · #2A2345 · #4C3D77

Elegant Contrast

Use #766BB0 as a light background for specific content blocks with dark text.

#766BB0 · #0F0B1E · #2A2345

CSS variables

:root {
  --celestial-dust-cloud-1: #2A2345;
  --celestial-dust-cloud-2: #4C3D77;
  --celestial-dust-cloud-3: #766BB0;
  --celestial-dust-cloud-4: #1C162D;
  --celestial-dust-cloud-5: #0F0B1E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust-cloud": {
        1: "#2A2345",
        2: "#4C3D77",
        3: "#766BB0",
        4: "#1C162D",
        5: "#0F0B1E",
      }
    }
  }
}

Hex values

Color 1#2A2345

Color 2#4C3D77

Color 3#766BB0

Color 4#1C162D

Color 5#0F0B1E

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

1.2:1Fail

1.3:1Fail

1.6:1Fail

2:1Fail

1.9:1Fail

2.1:1Fail

3.2:1AA18

2:1Fail

3.7:1AA18

4.1:1AA18

1.2:1Fail

1.9:1Fail

3.7:1AA18

1.1:1Fail

1.3:1Fail

2.1:1Fail

4.1:1AA18

1.1:1Fail

Similar palettes

More like Celestial Dust Cloud

View all Dark

Aurora Borealis Dream

Deep Space Orchid

Amethyst Star Cluster

Midnight Hues

Art Deco Sapphire

Baroque Night Grandeur