Back to palettes

Palette

Stardust Nebula Bloom

A celestial journey through soft blues and purples, reflecting distant nebulae and stardust.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stardust Nebula 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 Stardust Nebula Bloom.

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

Data visualization

#EDEEF2#B3BDD1#7A8EA8#4D5D73#2A384F

Palette guide

How to use Stardust Nebula Bloom

Overview

The Stardust Nebula Bloom palette (lighter version) offers a serene journey through soft blues and sophisticated greys, capturing the quiet elegance of distant nebulae. Ranging from the airy #EDEEF2 to the deep #2A384F, this collection is perfect for designers and developers seeking a calm, professional, and refined aesthetic. Its subtle transitions and cool tones, including #7A8EA8, are ideal for creating minimalist interfaces, corporate branding, or sophisticated editorial layouts. This palette ensures a clean, approachable feel while maintaining a touch of cosmic mystery, making it versatile for various professional and creative applications.

Best used for

  • Corporate and tech websites
  • Professional presentations
  • Minimalist UI design
  • Architectural visualization
  • Elegant branding for services
  • Editorial and print layouts

Suggested color roles

primary

#2A384F serves as a deep, grounding anchor, ideal for main text, headings, or dark footer sections.

secondary

#4D5D73 provides a rich, supportive dark blue-grey, adding depth without heavy contrast.

accent

#B3BDD1 offers a soft, cool highlight, perfect for subtle accents, borders, or inactive states.

background

#EDEEF2 is the lightest shade, providing a clean, airy and professional base for content.

text

For optimal readability, use #2A384F or a dark charcoal on lighter backgrounds like #EDEEF2.

Accessibility notes

  • Avoid using #B3BDD1 as text on #EDEEF2, as their contrast is very low and will fail accessibility standards.
  • Ensure sufficient contrast for body text by pairing #2A384F or #4D5D73 with the lightest background, #EDEEF2.
  • Interactive elements should have distinct color changes or outlines to ensure usability.
  • Contrast between #4D5D73 and #7A8EA8 might be insufficient for small text; use for larger elements.

Recommended combinations

Professional Contrast

Creates clean, readable layouts, ideal for corporate branding and main content areas.

#EDEEF2 · #2A384F · #7A8EA8

Subtle Depth

Perfect for background gradients, card shadows, or layering effects that add dimension.

#B3BDD1 · #7A8EA8 · #4D5D73

Clean Highlight

Use for navigation elements, hover states, or to gently emphasize specific UI components.

#EDEEF2 · #4D5D73 · #B3BDD1

CSS variables

:root {
  --stardust-nebula-bloom-2-1: #EDEEF2;
  --stardust-nebula-bloom-2-2: #B3BDD1;
  --stardust-nebula-bloom-2-3: #7A8EA8;
  --stardust-nebula-bloom-2-4: #4D5D73;
  --stardust-nebula-bloom-2-5: #2A384F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stardust-nebula-bloom-2": {
        1: "#EDEEF2",
        2: "#B3BDD1",
        3: "#7A8EA8",
        4: "#4D5D73",
        5: "#2A384F",
      }
    }
  }
}

Related searches

cool grey blue paletteprofessional UI colorsminimalist website designcelestial neutral tonessophisticated blue grey scheme

Palette colors

Hex values

Color 1#EDEEF2
·
Color 2#B3BDD1
·
Color 3#7A8EA8
·
Color 4#4D5D73
·
Color 5#2A384F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
5.8:1AA
10.2:1AAA
2
1.6:1Fail
1.8:1Fail
3.6:1AA18
6.3:1AA
3
2.9:1Fail
1.8:1Fail
2:1Fail
3.5:1AA18
4
5.8:1AA
3.6:1AA18
2:1Fail
1.8:1Fail
5
10.2:1AAA
6.3:1AA
3.5:1AA18
1.8:1Fail

Similar palettes

More like Stardust Nebula Bloom

View all cool
Celestial Orb Glow
Celestial Deep Nebula
Celestial Stardust Trails
Cosmic Dust Trail
Cosmic Ocean Depths
Galactic Void