Back to palettes

Palette

Stellar Dust Motes

A subtly shimmering dark palette, capturing the vast emptiness of space punctuated by faint, stardust glimmers.

darkminimal5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F121A#282C36#4C5464#7E8C9F#151A22

Palette guide

How to use Stellar Dust Motes

Overview

The Stellar Dust Motes palette evokes the subtle, quiet grandeur of deep space, offering a sophisticated dark theme ideal for digital interfaces. Dominated by deep, muted grays and near-blacks, it provides a minimal yet elegant foundation. Key colors like the profound #0F121A and the slightly lighter #282C36 establish a dark, immersive background, while #4C5464 and #7E8C9F introduce subtle contrast and hierarchy. This palette is perfect for designers and developers aiming for a professional, understated aesthetic that focuses user attention without overwhelming visuals. Its cohesive range ensures a harmonious look across various UI elements.

Best used for

  • Dark mode user interfaces
  • Luxury tech branding
  • Minimalist website designs
  • Space-themed applications
  • Elegant digital portfolios
  • High-end corporate presentations

Suggested color roles

primary

Use #0F121A as the foundational background color for main sections, providing a deep, immersive canvas.

secondary

Employ #282C36 for secondary panels, cards, or subtle divisions, offering visual separation without stark contrast.

accent

Apply #7E8C9F for interactive elements, highlights, or subtle iconography, ensuring visibility against darker tones.

background

The deepest #0F121A serves as the primary background for a truly dark and sophisticated aesthetic.

text

For primary text, use #7E8C9F, or a crisp white for maximum legibility against the dark backgrounds. Use #4C5464 for secondary or disabled text.

Accessibility notes

  • Ensure sufficient contrast for all text elements, especially when using #4C5464 on #282C36.
  • Verify focus states for interactive elements (buttons, links) are clearly distinguishable using #7E8C9F.
  • Consider larger font sizes or increased line height when using lighter grays on dark backgrounds to improve readability.
  • Avoid using #0F121A and #151A22 for adjacent, small text elements as their contrast is minimal.

Recommended combinations

Deep Horizon

Ideal for primary content areas with clear text hierarchy on a deep dark base.

#0F121A · #282C36 · #7E8C9F

Subtle Depth

Excellent for secondary UI elements, modal backgrounds, or subtle data visualizations.

#151A22 · #4C5464 · #7E8C9F

Cosmic Contrast

Effective for main backgrounds with readable headings and interactive elements.

#0F121A · #4C5464 · #7E8C9F

CSS variables

:root {
  --stellar-dust-motes-1: #0F121A;
  --stellar-dust-motes-2: #282C36;
  --stellar-dust-motes-3: #4C5464;
  --stellar-dust-motes-4: #7E8C9F;
  --stellar-dust-motes-5: #151A22;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-dust-motes": {
        1: "#0F121A",
        2: "#282C36",
        3: "#4C5464",
        4: "#7E8C9F",
        5: "#151A22",
      }
    }
  }
}

Related searches

dark space color paletteminimal grey UI designcosmic dust colorselegant dark mode themesubtle monochrome palette

Palette colors

Hex values

Color 1#0F121A
·
Color 2#282C36
·
Color 3#4C5464
·
Color 4#7E8C9F
·
Color 5#151A22
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.5:1Fail
5.5:1AA
1.1:1Fail
2
1.3:1Fail
1.8:1Fail
4.1:1AA18
1.3:1Fail
3
2.5:1Fail
1.8:1Fail
2.2:1Fail
2.3:1Fail
4
5.5:1AA
4.1:1AA18
2.2:1Fail
5.1:1AA
5
1.1:1Fail
1.3:1Fail
2.3:1Fail
5.1:1AA

Similar palettes

More like Stellar Dust Motes

View all dark