Back to palettes

Palette

Cosmic Dust Shimmer

An ethereal blend of soft purples and lavenders, like shimmering cosmic dust in a nebula.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Dust Shimmer 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 Dust Shimmer.

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

Data visualization

#3B3D6B#6C6FB0#C8C9EB#F2F3FF#54578E

Palette guide

How to use Cosmic Dust Shimmer

Overview

The Cosmic Dust Shimmer palette offers an ethereal blend of soft purples and lavenders, like shimmering cosmic dust in a nebula. Ranging from the deep #3B3D6B to the almost white #F2F3FF, this collection is perfect for designers seeking a calm, dreamy, and sophisticated aesthetic. It's particularly suitable for serene web designs, delicate branding, or applications that aim for a light, airy feel with a touch of celestial wonder. Developers will find these hex codes, including the gentle #6C6FB0, easy to implement for creating harmonious and visually appealing interfaces, ensuring a consistent and tranquil user experience across various digital platforms.

Best used for

  • Ethereal wedding branding
  • Soft lifestyle blogs
  • Dreamy mobile app interfaces
  • Spa and wellness websites
  • Artistic photography portfolios
  • Minimalist celestial designs

Suggested color roles

primary

#6C6FB0 - A balanced mid-tone purple that serves as an excellent foundation for main content areas or primary branding.

secondary

#C8C9EB - A soft lavender, ideal for secondary information, subtle backgrounds, or light interactive elements.

accent

#F2F3FF - A near-white with a hint of purple, perfect for highlights, active states, or delicate UI accents.

background

#F2F3FF - The lightest shade, providing a clean, airy background that enhances readability and a sense of calm.

text

#3B3D6B or black - Provides strong, legible contrast on the lighter shades, ensuring readability for all content.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #54578E on #6C6FB0.
  • Use #3B3D6B or black for text on #F2F3FF and #C8C9EB to meet WCAG AA contrast ratios.
  • Be cautious when combining #C8C9EB with #F2F3FF for smaller interactive elements due to low contrast.
  • Test all color pairings for readability, particularly for headings and important information.

Recommended combinations

Nebula Gradient

Creates a gentle, flowing background or header effect, evoking a soft celestial atmosphere.

#3B3D6B · #6C6FB0 · #C8C9EB

Soft Contrast

Ideal for presenting content with clear hierarchy, using a light background, accent, and dark text.

#6C6FB0 · #F2F3FF · #54578E

Dreamy Layers

Excellent for creating subtle depth in UI elements, card designs, or layered informational displays.

#3B3D6B · #C8C9EB · #F2F3FF

CSS variables

:root {
  --cosmic-dust-shimmer-3-1: #3B3D6B;
  --cosmic-dust-shimmer-3-2: #6C6FB0;
  --cosmic-dust-shimmer-3-3: #C8C9EB;
  --cosmic-dust-shimmer-3-4: #F2F3FF;
  --cosmic-dust-shimmer-3-5: #54578E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-shimmer-3": {
        1: "#3B3D6B",
        2: "#6C6FB0",
        3: "#C8C9EB",
        4: "#F2F3FF",
        5: "#54578E",
      }
    }
  }
}

Related searches

soft purple color schemeethereal pastel palettedreamy space designlight lavender hex codescalm celestial colors

Palette colors

Hex values

Color 1#3B3D6B
·
Color 2#6C6FB0
·
Color 3#C8C9EB
·
Color 4#F2F3FF
·
Color 5#54578E
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
6.3:1AA
9.2:1AAA
1.5:1Fail
2
2.2:1Fail
2.9:1Fail
4.2:1AA18
1.4:1Fail
3
6.3:1AA
2.9:1Fail
1.5:1Fail
4.2:1AA18
4
9.2:1AAA
4.2:1AA18
1.5:1Fail
6.1:1AA
5
1.5:1Fail
1.4:1Fail
4.2:1AA18
6.1:1AA

Similar palettes

More like Cosmic Dust Shimmer

View all pastel
Celestial Dream Dust
Cosmic Dream Dust
Lavender Haze Dream
Pastel Galaxy Dream
Amethyst Haze Dream
Aura Amethyst Dream