Back to palettes

Palette

Stardust Nebula Bloom

Deep, serene blues infused with shimmering lighter tones, like a distant nebula blooming with cosmic stardust.

coolcalm5 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

#0E162B#2A3656#465582#6175AD#7D94D9

Palette guide

How to use Stardust Nebula Bloom

Overview

The Stardust Nebula Bloom palette (darker version) offers a serene yet deep dive into blues, transitioning from the profound #0E162B to the shimmering #7D94D9. This collection captures the essence of a cosmic nebula blooming with stardust, providing a sophisticated range for designers and developers. Its cool, calm tones, including #465582, are ideal for creating immersive digital experiences, tranquil branding, or elegant UI designs. The palette's depth allows for strong primary statements, while its lighter blues offer gentle highlights, making it perfect for projects that aim to evoke cosmic wonder with a sense of calm and professionalism.

Best used for

  • Science and educational websites
  • Meditation and wellness apps
  • Night-sky photography displays
  • Luxury automotive branding
  • Marine or ocean-themed designs
  • UI for data visualization tools

Suggested color roles

primary

#0E162B serves as the deepest, most grounding blue, ideal for dark mode backgrounds or primary branding.

secondary

#2A3656 offers a rich supporting blue, adding subtle variation and depth to larger sections.

accent

#7D94D9 provides the brightest, most ethereal highlight, perfect for interactive elements or glowing effects.

background

Use #0E162B for a truly immersive and serene dark background, enhancing content visibility.

text

For optimal readability on dark backgrounds, use white or a very light grey. Use #0E162B for headings on #7D94D9.

Accessibility notes

  • Ensure high contrast for text; light colors are critical for readability on #0E162B, #2A3656, and #465582.
  • Avoid using #6175AD as text on #7D94D9 due to insufficient contrast; use for larger graphical elements.
  • Interactive elements should have distinct focus states, possibly utilizing the brightest shade, #7D94D9.
  • The contrast between #2A3656 and #465582 is low; use these for depth in large design elements, not small text.

Recommended combinations

Deep Cosmic Focus

Main branding, feature sections, or to create a strong visual hierarchy with a serene accent.

#0E162B · #7D94D9 · #465582

Serene Gradient

Background elements, subtle UI transitions, or to add visual depth in a calming manner.

#2A3656 · #465582 · #6175AD

Ethereal Highlight

Glowing effects, important data points, or interactive elements that need to stand out.

#0E162B · #6175AD · #7D94D9

CSS variables

:root {
  --stardust-nebula-bloom-1: #0E162B;
  --stardust-nebula-bloom-2: #2A3656;
  --stardust-nebula-bloom-3: #465582;
  --stardust-nebula-bloom-4: #6175AD;
  --stardust-nebula-bloom-5: #7D94D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stardust-nebula-bloom": {
        1: "#0E162B",
        2: "#2A3656",
        3: "#465582",
        4: "#6175AD",
        5: "#7D94D9",
      }
    }
  }
}

Related searches

deep blue color schemesnebula inspired paletteserene cosmic UItranquil blue brandingdark blue light blue contrast

Palette colors

Hex values

Color 1#0E162B
·
Color 2#2A3656
·
Color 3#465582
·
Color 4#6175AD
·
Color 5#7D94D9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4:1AA18
6.1:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
4:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.1:1AA
4:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Stardust Nebula Bloom

View all cool