Back to palettes

Palette

Cosmic Dust Whisper

A gradient of deep blues and grays, like stardust drifting through the cosmos.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Dust Whisper 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 Cosmic Dust Whisper.

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

Data visualization

#1F2833#3C4B5E#5D7086#8CA0B8#B0C4DB

Palette guide

How to use Cosmic Dust Whisper

Overview

The Cosmic Dust Whisper palette presents a gradient of deep blues and grays, like stardust drifting through the cosmos. Ranging from the profound #1F2833 to the soft #B0C4DB, this collection is perfect for designers creating cool, mysterious, and visually harmonious digital experiences. It's particularly suitable for tech-focused branding, dark mode interfaces, or applications that aim for a professional yet intriguing aesthetic. Developers can integrate these versatile hex codes, such as the balanced #5D7086, to build visually compelling applications and websites, ensuring a consistent and enigmatic user experience across various digital platforms.

Best used for

  • Tech startup branding
  • Dark mode web applications
  • Sci-fi themed UI/UX
  • Professional data dashboards
  • Automotive design concepts
  • Minimalist cool-toned designs

Suggested color roles

primary

#3C4B5E - A deep blue-gray that serves as an excellent base for large sections or main content areas.

secondary

#5D7086 - A balanced mid-tone blue-gray, suitable for secondary information, interactive components, or subtle data visualization.

accent

#8CA0B8 - A lighter, more luminous gray-blue, ideal for drawing attention to calls to action, highlights, or subtle glow effects.

background

#1F2833 - The deepest, most enveloping shade, creating a profound and immersive backdrop for all other elements.

text

#B0C4DB or white - Provides clear readability and a soft glow against the darker shades within the palette.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #5D7086 on #3C4B5E.
  • Always use #B0C4DB or white for body text on #1F2833 and #3C4B5E to meet WCAG AA standards.
  • Be cautious with contrast when layering #8CA0B8 over #5D7086 for crucial UI elements.
  • Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Deep Space Layers

Creates a layered, atmospheric background perfect for conveying depth and professionalism in digital interfaces.

#1F2833 · #3C4B5E · #5D7086

Subtle Stardust

Ideal for highlighting key information or interactive elements, providing a soft, ethereal shimmer.

#3C4B5E · #8CA0B8 · #B0C4DB

Cosmic Hierarchy

Excellent for establishing clear visual hierarchy, separating content blocks with a dark base and light accents.

#1F2833 · #5D7086 · #8CA0B8

CSS variables

:root {
  --cosmic-dust-whisper-2-1: #1F2833;
  --cosmic-dust-whisper-2-2: #3C4B5E;
  --cosmic-dust-whisper-2-3: #5D7086;
  --cosmic-dust-whisper-2-4: #8CA0B8;
  --cosmic-dust-whisper-2-5: #B0C4DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-whisper-2": {
        1: "#1F2833",
        2: "#3C4B5E",
        3: "#5D7086",
        4: "#8CA0B8",
        5: "#B0C4DB",
      }
    }
  }
}

Related searches

dark blue gray palettecosmic UI colorsmysterious space designgalactic cool tonesprofessional dark theme

Palette colors

Hex values

Color 1#1F2833
·
Color 2#3C4B5E
·
Color 3#5D7086
·
Color 4#8CA0B8
·
Color 5#B0C4DB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
5.6:1AA
8.3:1AAA
2
1.7:1Fail
1.7:1Fail
3.3:1AA18
5:1AA
3
2.9:1Fail
1.7:1Fail
1.9:1Fail
2.9:1Fail
4
5.6:1AA
3.3:1AA18
1.9:1Fail
1.5:1Fail
5
8.3:1AAA
5:1AA
2.9:1Fail
1.5:1Fail

Similar palettes

More like Cosmic Dust Whisper

View all cool