Back to palettes

Palette

Mystic Celestial Dust

A ethereal collection of blues and greys, inspired by the vast, mysterious celestial dust clouds.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4F6B#6A8BA1#A9C2D2#2B3D56#5B7B91

Palette guide

How to use Mystic Celestial Dust

Overview

The Mystic Celestial Dust palette offers an ethereal collection of blues and greys, drawing inspiration from vast, mysterious celestial dust clouds. Ranging from the deep #2B3D56 to the serene #A9C2D2, with supporting shades like #3A4F6B and #6A8BA1, this palette exudes calm sophistication. It's an excellent choice for projects requiring a modern, clean, and subtly luxurious aesthetic. Designers and developers can leverage these harmonious cool tones to create elegant user interfaces, compelling tech branding, and serene digital experiences that feel both grounded and expansive.

Best used for

  • Tech company branding
  • Astronomy-themed educational sites
  • Serene corporate websites
  • Modern app interfaces
  • Subtle luxury designs
  • Scientific publications

Suggested color roles

primary

Utilize #2B3D56 as the deepest, grounding blue-grey for main headings or foundational elements.

secondary

Employ #3A4F6B for supportive sections or backgrounds, adding depth without heavy contrast.

accent

Highlight interactive elements or subtle details with #6A8BA1, providing a gentle, sophisticated pop.

background

Use #A9C2D2 as a light, airy base for content areas, ensuring excellent readability and a calm feel.

text

A dark blue-grey like #2B3D56 or a dark charcoal provides optimal readability on lighter backgrounds.

Accessibility notes

  • Ensure dark text like #2B3D56 has sufficient contrast on light backgrounds such as #A9C2D2 for readability.
  • Avoid using #6A8BA1 or #5B7B91 for small text on #A9C2D2 due to potential low contrast.
  • If using darker backgrounds, employ lighter shades for text (e.g., #A9C2D2 on #2B3D56) to maintain contrast.
  • Always check contrast ratios for all critical text and UI elements to meet WCAG AA standards.

Recommended combinations

Cosmic Depth

Ideal for backgrounds or header sections, creating a sense of deep, layered space.

#2B3D56 · #3A4F6B · #5B7B91

Starry Haze

Perfect for card backgrounds, subtle gradients, or overlays that add an ethereal touch.

#A9C2D2 · #6A8BA1 · #3A4F6B

Celestial Accent

Great for buttons, informational highlights, or subtle interactive elements.

#5B7B91 · #6A8BA1 · #2B3D56

CSS variables

:root {
  --mystic-celestial-dust-1: #3A4F6B;
  --mystic-celestial-dust-2: #6A8BA1;
  --mystic-celestial-dust-3: #A9C2D2;
  --mystic-celestial-dust-4: #2B3D56;
  --mystic-celestial-dust-5: #5B7B91;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-celestial-dust": {
        1: "#3A4F6B",
        2: "#6A8BA1",
        3: "#A9C2D2",
        4: "#2B3D56",
        5: "#5B7B91",
      }
    }
  }
}

Related searches

celestial color palettespace themed colorsblue grey aestheticcalm ui designmodern tech colors

Palette colors

Hex values

Color 1#3A4F6B
·
Color 2#6A8BA1
·
Color 3#A9C2D2
·
Color 4#2B3D56
·
Color 5#5B7B91
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
4.5:1AA
1.3:1Fail
1.9:1Fail
2
2.3:1Fail
1.9:1Fail
3.1:1AA18
1.2:1Fail
3
4.5:1AA
1.9:1Fail
6:1AA
2.4:1Fail
4
1.3:1Fail
3.1:1AA18
6:1AA
2.5:1Fail
5
1.9:1Fail
1.2:1Fail
2.4:1Fail
2.5:1Fail

Similar palettes

More like Mystic Celestial Dust

View all cool
Celestial Dreamscape
Celestial Oasis Dream
Celestial Shimmer
Cosmic Cloud Dream
Galactic Stardust Trail
Aqua Ocean Dream