Back to palettes

Palette

Asteroid Drift Grey

A rugged, dark palette evoking the somber, dusty surface of a drifting asteroid in deep space.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Asteroid Drift Grey 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 Drift Grey.

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

Data visualization

#1F252C#3F4750#616B74#838C96#A5AEB6

Palette guide

How to use Asteroid Drift Grey

Overview

The Asteroid Drift Grey palette offers a rugged, dark collection evoking the somber, dusty surface of a drifting asteroid in deep space. Ranging from the profound #1F252C and #3F4750 to the mid-tones of #616B74 and #838C96, culminating in the lighter #A5AEB6, this monochromatic scheme is perfect for designers and developers building immersive, high-tech, or industrial experiences. Its cool, desaturated tones provide a sense of gravitas and sophistication, ideal for dark mode applications, sci-fi game interfaces, or minimalist branding that demands a strong, no-nonsense aesthetic.

Best used for

  • Sci-fi game interfaces
  • Industrial design branding
  • Dark mode web applications
  • Rugged outdoor gear marketing
  • Technical documentation platforms
  • Space exploration themed visuals

Suggested color roles

primary

#1F252C serves as the strong, foundational dark primary, ideal for main backgrounds and critical headers.

secondary

#3F4750 provides supportive depth, excellent for card elements, borders, or secondary navigation.

accent

#838C96 offers a subtle, cool highlight, perfect for icons, progress bars, or interactive component states.

background

#1F252C creates an immersive dark base, enhancing the rugged, cosmic feel of the palette.

text

#A5AEB6 ensures excellent readability for primary text on dark backgrounds, or use a crisp white for maximum contrast.

Accessibility notes

  • Prioritize high contrast for text, especially #A5AEB6 on #1F252C, to meet WCAG AA standards.
  • Use lighter shades for interactive elements to ensure they are easily discoverable and usable.
  • Test text legibility across different font sizes and weights, particularly for lighter grays.
  • Consider providing a high-contrast mode option for users with severe visual impairments.

Recommended combinations

Deep Cosmic

A core dark mode combination, providing depth and clear readability for primary content.

#1F252C · #3F4750 · #A5AEB6

Rocky Surface

Creates a textured, rugged feel, suitable for backgrounds or sections requiring visual weight.

#616B74 · #838C96 · #1F252C

Drifting Shadows

Ideal for subtle gradients or layered elements, evoking the vastness of space.

#3F4750 · #616B74 · #838C96

CSS variables

:root {
  --asteroid-drift-grey-1: #1F252C;
  --asteroid-drift-grey-2: #3F4750;
  --asteroid-drift-grey-3: #616B74;
  --asteroid-drift-grey-4: #838C96;
  --asteroid-drift-grey-5: #A5AEB6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "asteroid-drift-grey": {
        1: "#1F252C",
        2: "#3F4750",
        3: "#616B74",
        4: "#838C96",
        5: "#A5AEB6",
      }
    }
  }
}

Related searches

dark grey color schemecosmic rock palettesci-fi UI colorsmonochromatic dark modeindustrial grey tones

Palette colors

Hex values

Color 1#1F252C
·
Color 2#3F4750
·
Color 3#616B74
·
Color 4#838C96
·
Color 5#A5AEB6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.5:1AA
6.9:1AA
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
4.2:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.4:1Fail
4
4.5:1AA
2.8:1Fail
1.6:1Fail
1.5:1Fail
5
6.9:1AA
4.2:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Asteroid Drift Grey

View all dark
Astral Dust Whisper
Celestial Dust Swirl
Celestial Shimmer Glow
Cosmic Abyss Echo
Cosmic Deep Slumber
Cosmic Dreamscape Dust