Back to palettes

Palette

Stellar Dust Trails

Deep blues and grays with shimmering lighter tones, mimicking the vast, star-dusted trails of distant galaxies.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stellar Dust Trails 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 Stellar Dust Trails.

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

Data visualization

#0B0E17#262D3D#46556B#6D829A#9AB3CE

Palette guide

How to use Stellar Dust Trails

Overview

The Stellar Dust Trails palette (#stellar-dust-trails-2) offers a sophisticated gradient of deep blues and grays, perfect for evoking a sense of mystery and cosmic wonder. Starting with the profound #0B0E17, it gradually lightens through #262D3D, #46556B, and #6D829A, culminating in the ethereal #9AB3CE. This thoughtful progression allows designers and developers to build layered interfaces that are both immersive and highly legible. It's an excellent choice for projects requiring a serious yet intriguing aesthetic, capturing the vastness of space with a professional and cool-toned approach.

Best used for

  • Science fiction game interfaces
  • Corporate technology platforms
  • Educational astronomy websites
  • Mysterious branding initiatives
  • Data visualization dashboards
  • Dark mode applications

Suggested color roles

primary

Utilize #0B0E17 as the dominant background color for a deep, immersive foundation, akin to the night sky.

secondary

Employ #262D3D for secondary panels, cards, or subtle section dividers, providing a soft separation.

accent

Apply #9AB3CE as a bright accent for calls-to-action, key iconography, or interactive states to ensure visibility.

background

The deepest #0B0E17 is ideal for a profound, dark background that sets a serious, cosmic tone.

text

For primary text on dark backgrounds, use #9AB3CE or white for optimal readability. For secondary text, #6D829A works well.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #6D829A on #46556B; consider larger font sizes.
  • Verify that interactive elements using #9AB3CE have clear focus states against adjacent colors.
  • Avoid using #0B0E17 and #262D3D for small, critical text elements due to their low contrast.
  • Always test text legibility on various screen types and lighting conditions, particularly for body text.

Recommended combinations

Deep Void

Effective for main layouts, providing a dark base with light, readable text and clear accents.

#0B0E17 · #262D3D · #9AB3CE

Galactic Flow

Ideal for progressive disclosure, step-by-step processes, or hierarchical content sections.

#262D3D · #46556B · #6D829A

Starlight Glimmer

Great for hero sections, prominent headings, and interactive components that need to stand out.

#0B0E17 · #6D829A · #9AB3CE

CSS variables

:root {
  --stellar-dust-trails-2-1: #0B0E17;
  --stellar-dust-trails-2-2: #262D3D;
  --stellar-dust-trails-2-3: #46556B;
  --stellar-dust-trails-2-4: #6D829A;
  --stellar-dust-trails-2-5: #9AB3CE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-dust-trails-2": {
        1: "#0B0E17",
        2: "#262D3D",
        3: "#46556B",
        4: "#6D829A",
        5: "#9AB3CE",
      }
    }
  }
}

Related searches

deep blue grey palettecosmic UI colorsmysterious space themedark blue web designgalactic gradient palette

Palette colors

Hex values

Color 1#0B0E17
·
Color 2#262D3D
·
Color 3#46556B
·
Color 4#6D829A
·
Color 5#9AB3CE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
4.9:1AA
8.9:1AAA
2
1.4:1Fail
1.8:1Fail
3.5:1AA18
6.4:1AA
3
2.5:1Fail
1.8:1Fail
1.9:1Fail
3.5:1AA18
4
4.9:1AA
3.5:1AA18
1.9:1Fail
1.8:1Fail
5
8.9:1AAA
6.4:1AA
3.5:1AA18
1.8:1Fail

Similar palettes

More like Stellar Dust Trails

View all dark
Stellar Void Gaze
Celestial Dust Swirl
Cosmic Deep Slumber
Cosmic Dust Bloom
Cosmic Stardust Drift
Dark Matter Shroud