Back to palettes

Palette

Asteroid Belt Shadow

Subdued greys and blues, capturing the vast, shadowy expanse of an asteroid field.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Asteroid Belt Shadow 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 Asteroid Belt Shadow.

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

Data visualization

#333940#4A525C#616B78#798394#909CAD

Palette guide

How to use Asteroid Belt Shadow

Overview

The Asteroid Belt Shadow palette features subdued greys and blues, capturing the vast, shadowy expanse of an asteroid field. This deep, subtle, and minimalist collection ranges from the profound #333940 and #4A525C, through the mid-tone #616B78, to the lighter blue-greys of #798394 and #909CAD. It's a sophisticated choice for designers and developers aiming to create dark-themed interfaces, sci-fi aesthetics, or minimalist branding that conveys depth and mystery. The palette's cool, muted tones provide a sense of calm and professionalism, perfect for immersive digital experiences.

Best used for

  • Dark mode UI/UX designs
  • Sci-fi themed websites and games
  • Minimalist corporate branding
  • Tech product interfaces
  • Atmospheric game environments
  • Sophisticated data visualizations

Suggested color roles

primary

#333940 serves as a deep, grounding primary color, ideal for main backgrounds or prominent headers in dark themes.

secondary

#4A525C provides a rich, supportive secondary tone, excellent for card backgrounds or secondary content blocks.

accent

#798394 offers a subtle highlight, perfect for icons, borders, or interactive elements that need a gentle pop.

background

#333940 creates an immersive dark background, providing depth and allowing lighter elements to stand out.

text

#909CAD ensures excellent readability for text on the dark primary background, or use a crisp white for maximum contrast.

Accessibility notes

  • Ensure high contrast between text (#909CAD) and background (#333940) to meet WCAG AA standards.
  • Use lighter shades like #909CAD for interactive elements to improve visibility on dark backgrounds.
  • Test readability across various screen brightness settings, as dark themes can be challenging in bright environments.
  • Provide clear visual cues for focus states on interactive components to enhance usability.

Recommended combinations

Deep Space

A classic dark mode combination, offering depth and clear readability for text and elements.

#333940 · #4A525C · #909CAD

Subtle Contrast

Creates a nuanced, layered effect, ideal for secondary information panels or complex UI structures.

#616B78 · #333940 · #798394

Cosmic Gradient

Perfect for backgrounds or large design areas where a smooth, dark, and atmospheric transition is desired.

#333940 · #4A525C · #616B78

CSS variables

:root {
  --asteroid-belt-shadow-1: #333940;
  --asteroid-belt-shadow-2: #4A525C;
  --asteroid-belt-shadow-3: #616B78;
  --asteroid-belt-shadow-4: #798394;
  --asteroid-belt-shadow-5: #909CAD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "asteroid-belt-shadow": {
        1: "#333940",
        2: "#4A525C",
        3: "#616B78",
        4: "#798394",
        5: "#909CAD",
      }
    }
  }
}

Related searches

dark mode color palettespace themed colorssubtle grey blueminimalist dark UIasteroid design scheme

Palette colors

Hex values

Color 1#333940
·
Color 2#4A525C
·
Color 3#616B78
·
Color 4#798394
·
Color 5#909CAD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3:1AA18
4.2:1AA18
2
1.5:1Fail
1.5:1Fail
2.1:1Fail
2.8:1Fail
3
2.2:1Fail
1.5:1Fail
1.4:1Fail
1.9:1Fail
4
3:1AA18
2.1:1Fail
1.4:1Fail
1.4:1Fail
5
4.2:1AA18
2.8:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Asteroid Belt Shadow

View all dark
Cosmic Void Depths
Charcoal Depths
Midnight Stone Garden
Abyssal Void Hues
Asteroid Drift Grey
Astral Dust Whisper