Palette

Cosmic Dust Swirl

A journey through deep space, with nebular blues and cosmic greys swirling into the unknown.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A2E#2B3A5A#4F5D7B#8B94A6#C7D0DA

Palette guide

How to use Cosmic Dust Swirl

Overview

The Cosmic Dust Swirl palette takes users on a journey through deep space, with nebular blues and cosmic grays swirling into the unknown. Ranging from the profound #1A1A2E to the soft #C7D0DA, this collection is perfect for designers creating sophisticated, dark, and subtly mysterious 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 #4F5D7B, 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
Modern architectural visualizations

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

#C7D0DA 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 #4F5D7B on #2B3A5A.
Always use #C7D0DA or white for body text on #1A1A2E and #2B3A5A to meet WCAG AA standards.
Be cautious with contrast when layering #8B94A6 over #4F5D7B 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.

#1A1A2E · #2B3A5A · #4F5D7B

Subtle Highlight

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

#2B3A5A · #8B94A6 · #C7D0DA

Cosmic Hierarchy

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

#1A1A2E · #4F5D7B · #8B94A6

CSS variables

:root {
  --cosmic-dust-swirl-1: #1A1A2E;
  --cosmic-dust-swirl-2: #2B3A5A;
  --cosmic-dust-swirl-3: #4F5D7B;
  --cosmic-dust-swirl-4: #8B94A6;
  --cosmic-dust-swirl-5: #C7D0DA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dust-swirl": {
        1: "#1A1A2E",
        2: "#2B3A5A",
        3: "#4F5D7B",
        4: "#8B94A6",
        5: "#C7D0DA",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#2B3A5A

Color 3#4F5D7B

Color 4#8B94A6

Color 5#C7D0DA

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

5.6:1AA

10.9:1AAA

1.5:1Fail

1.7:1Fail

3.7:1AA18

7.3:1AAA

2.6:1Fail

1.7:1Fail

2.2:1Fail

4.2:1AA18

5.6:1AA

3.7:1AA18

2.2:1Fail

2:1Fail

10.9:1AAA

7.3:1AAA

4.2:1AA18

2:1Fail

Similar palettes

More like Cosmic Dust Swirl

View all dark

Celestial Sapphire Dust

Deep Space Constellation

Desert Night Sky

Galactic Star Dust

Galactic Stardust Trail

Moonlit Canyon Gloom