Palette

Celestial Glimmer Dust

A magical blend of deep blues and purples, speckled with stardust, evoking the mystery of celestial dust.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1C3A#3A2B6B#5F4B9E#8C7CC7#BFE0F5

Palette guide

How to use Celestial Glimmer Dust

Overview

The Celestial Glimmer Dust palette offers a magical blend of deep blues and purples, speckled with stardust, evoking the mystery of celestial dust. Ranging from the profound #1F1C3A to the luminous #BFE0F5, with harmonious intermediate shades like #3A2B6B, #5F4B9E, and #8C7CC7, this collection exudes a dark, mystical, and elegant aura. It's ideal for designers and developers looking to create immersive, captivating, and sophisticated digital experiences, branding, or interfaces that blend cosmic wonder with a touch of serene beauty.

Best used for

Fantasy game UI and environment art
Luxury spiritual or wellness brands
High-end tech product branding
Dark mode UI for creative platforms
Astronomy-focused educational content
E-commerce for unique, artisanal goods

Suggested color roles

primary

#1F1C3A serves as a dominant, deep background color, establishing a luxurious and mysterious foundation.

secondary

#3A2B6B or #5F4B9E are excellent for secondary sections, navigation, or card backgrounds, adding depth and richness.

accent

#BFE0F5 or #8C7CC7 provides a luminous highlight for interactive elements, calls to action, or subtle glowing effects.

background

For dark themes, #1F1C3A is the primary background. For lighter sections, #BFE0F5 can serve as a delicate accent background.

text

#BFE0F5 or #8C7CC7 offers excellent readability against the darker shades. A near-white is also suitable.

Accessibility notes

#BFE0F5 provides strong contrast for text on #1F1C3A, #3A2B6B, and #5F4B9E, meeting WCAG AA standards.
Be cautious when using #8C7CC7 for small text on #BFE0F5; ensure sufficient contrast.
Ensure interactive elements using lighter shades on darker backgrounds have clear focus states.
This palette offers good options for high contrast text pairings, especially with the lightest and darkest shades.

Recommended combinations

Magical Cosmos

Ideal for a sophisticated dark mode interface with clear hierarchy and a vibrant accent.

#1F1C3A · #BFE0F5 · #5F4B9E

Stardust Gradient

Perfect for background fills or hero sections, creating a smooth, ethereal transition.

#3A2B6B · #5F4B9E · #8C7CC7

Luminous Glimmer

Use #BFE0F5 as a light background for specific content blocks, with dark text and a deeper accent.

#BFE0F5 · #1F1C3A · #3A2B6B

CSS variables

:root {
  --celestial-glimmer-dust-1: #1F1C3A;
  --celestial-glimmer-dust-2: #3A2B6B;
  --celestial-glimmer-dust-3: #5F4B9E;
  --celestial-glimmer-dust-4: #8C7CC7;
  --celestial-glimmer-dust-5: #BFE0F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-glimmer-dust": {
        1: "#1F1C3A",
        2: "#3A2B6B",
        3: "#5F4B9E",
        4: "#8C7CC7",
        5: "#BFE0F5",
      }
    }
  }
}

Hex values

Color 1#1F1C3A

Color 2#3A2B6B

Color 3#5F4B9E

Color 4#8C7CC7

Color 5#BFE0F5

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.5:1AA

11.8:1AAA

1.4:1Fail

1.7:1Fail

3.4:1AA18

8.7:1AAA

2.3:1Fail

1.7:1Fail

1.9:1Fail

5.1:1AA

4.5:1AA

3.4:1AA18

1.9:1Fail

2.6:1Fail

11.8:1AAA

8.7:1AAA

5.1:1AA

2.6:1Fail

Similar palettes

More like Celestial Glimmer Dust