Back to palettes

Palette

Celestial Dust Bloom

Soft, shimmering purples and pinks evoke the delicate beauty of cosmic dust blooming in distant galaxies.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#330033#663366#996699#CC99CC#FFCCFF

Palette guide

How to use Celestial Dust Bloom

Overview

The Celestial Dust Bloom palette radiates with soft, shimmering purples and pinks, evoking the delicate beauty of cosmic dust blooming in distant galaxies. Ranging from the deep #330033 to the vibrant #FFCCFF, this collection provides a mystical and airy feel. With intermediate shades like #663366, #996699, and #CC99CC, designers and developers can craft captivating interfaces, whimsical branding, or enchanting digital art. This palette is perfect for projects that aim to be elegant, dreamlike, and subtly vibrant, creating a sense of wonder and calm.

Best used for

  • Whimsical children's brands
  • Fantasy game UI or assets
  • Creative art and design portfolios
  • Mystical themed events or products
  • Feminine fashion or beauty blogs
  • E-commerce for handcrafted items

Suggested color roles

primary

#330033 serves as a deep, rich foundation for backgrounds, headers, or dominant graphic elements, establishing a mystical base.

secondary

#663366 or #996699 are excellent for secondary navigation, card backgrounds, or subheadings, offering depth without being too dark.

accent

#FFCCFF provides a bright, ethereal pop, perfect for calls to action, interactive elements, or subtle glowing effects.

background

#FFCCFF offers a very light, almost white-pink canvas, ideal for airy and delicate layouts.

text

For dark backgrounds, #FFCCFF ensures excellent readability. For light backgrounds, a deep charcoal or #330033 provides optimal contrast.

Accessibility notes

  • #330033 offers strong contrast against #FFCCFF for text, meeting WCAG AA standards.
  • Be cautious when using #CC99CC for small text on #FFCCFF; ensure sufficient contrast or use larger font sizes.
  • Avoid using #FFCCFF for small text on any of the mid-tone purples, as contrast will be low.
  • Ensure interactive elements are clearly distinguishable in their various states.

Recommended combinations

Mystical Glow

Ideal for dark mode UIs with a bright, ethereal accent and readable text.

#330033 · #FFCCFF · #996699

Airy Gradient

Suitable for background transitions or layered graphics, providing smooth, dreamy shifts.

#663366 · #996699 · #CC99CC

Delicate Content

A clean setup for content-heavy pages, using the lightest color as a base with dark, readable text.

#FFCCFF · #330033 · #663366

CSS variables

:root {
  --celestial-dust-bloom-1: #330033;
  --celestial-dust-bloom-2: #663366;
  --celestial-dust-bloom-3: #996699;
  --celestial-dust-bloom-4: #CC99CC;
  --celestial-dust-bloom-5: #FFCCFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-dust-bloom": {
        1: "#330033",
        2: "#663366",
        3: "#996699",
        4: "#CC99CC",
        5: "#FFCCFF",
      }
    }
  }
}

Related searches

pastel purple pink palettemystical UI colorsdreamy cosmic brandingethereal web designsoft galactic theme

Palette colors

Hex values

Color 1#330033
·
Color 2#663366
·
Color 3#996699
·
Color 4#CC99CC
·
Color 5#FFCCFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
4:1AA18
7.6:1AAA
12.9:1AAA
2
1.9:1Fail
2.1:1Fail
4:1AA18
6.9:1AA
3
4:1AA18
2.1:1Fail
1.9:1Fail
3.3:1AA18
4
7.6:1AAA
4:1AA18
1.9:1Fail
1.7:1Fail
5
12.9:1AAA
6.9:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Celestial Dust Bloom

View all Pastel
Celestial Dust Trail
Cloud Kissed Lavender
Desert Sunrise
Cherry Blossom
Cloudy Rose Serene
Coral Cloud Blush