Palette

Galactic Storm Swirl

Deep purples and dark grays swirl together, creating a mysterious and powerful galactic storm visual.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Galactic Storm 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 Galactic Storm Swirl.

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

Data visualization

#0F0F1E#2A1F3C#4C3760#7E5F8B#C2B3CE

Palette guide

How to use Galactic Storm Swirl

Overview

The Galactic Storm Swirl palette is a mysterious and moody collection of deep purples and dark grays, perfect for projects demanding a sophisticated, somber, or cosmic aesthetic. The base #0F0F1E provides a solid foundation, while #2A1F3C and #4C3760 offer rich, layered depth. Softer, ethereal touches come from #7E5F8B and #C2B3CE, adding a sense of distant light within the storm. This palette is excellent for creating atmosphere and intrigue in UI design, digital art, or branding that aims for gravitas and discovery. Designers and developers can leverage its depth for immersive dark mode experiences and compelling visual narratives.

Best used for

Sci-fi game environments
Dark mode UI themes
Mysterious branding
Film title sequences
Abstract digital art
Luxury product packaging

Suggested color roles

primary

#0F0F1E (The darkest shade, serving as a deep, grounding base for backgrounds and large structural elements.)

secondary

#2A1F3C (A rich, dark purple that adds depth and dimension, suitable for secondary panels or content blocks.)

accent

#7E5F8B (A muted, ethereal highlight, best used for subtle emphasis on interactive elements or decorative details.)

background

#0F0F1E (An immersive, dark canvas that sets a mysterious and sophisticated tone for any application.)

text

#C2B3CE (A light, readable purple-grey, offering excellent contrast for body text on the darker palette colors, or use pure white.)

Accessibility notes

Ensure #C2B3CE text has sufficient contrast against #0F0F1E and #2A1F3C for optimal readability.
Avoid using #4C3760 or #7E5F8B for small text on darker backgrounds without thorough contrast checks.
For interactive elements, ensure #7E5F8B provides enough visual distinction from surrounding darker colors.
Always test all text and interactive UI element combinations against WCAG AA guidelines to confirm accessibility.

Recommended combinations

Stormy Depths

Ideal for base layers, background panels, and primary containers, providing deep visual separation.

#0F0F1E · #2A1F3C · #4C3760

Ethereal Mist

Perfect for subheadings, secondary buttons, or subtle gradients that add atmospheric nuance.

#4C3760 · #7E5F8B · #2A1F3C

Cosmic Glow

Excellent for main text on dark backgrounds, ensuring clarity and readability for key information.

#0F0F1E · #C2B3CE · #4C3760

CSS variables

:root {
  --galactic-storm-swirl-1: #0F0F1E;
  --galactic-storm-swirl-2: #2A1F3C;
  --galactic-storm-swirl-3: #4C3760;
  --galactic-storm-swirl-4: #7E5F8B;
  --galactic-storm-swirl-5: #C2B3CE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-storm-swirl": {
        1: "#0F0F1E",
        2: "#2A1F3C",
        3: "#4C3760",
        4: "#7E5F8B",
        5: "#C2B3CE",
      }
    }
  }
}

Hex values

Color 1#0F0F1E

Color 2#2A1F3C

Color 3#4C3760

Color 4#7E5F8B

Color 5#C2B3CE

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

3.5:1AA18

9.6:1AAA

1.2:1Fail

1.5:1Fail

2.9:1Fail

7.8:1AAA

1.8:1Fail

1.5:1Fail

1.9:1Fail

5.3:1AA

3.5:1AA18

2.9:1Fail

1.9:1Fail

2.7:1Fail

9.6:1AAA

7.8:1AAA

5.3:1AA

2.7:1Fail

Similar palettes

More like Galactic Storm Swirl

View all dark

Celestial Stardust Trails

Cosmic Nebula Swirl

Cosmic Stardust Drift

Cosmic Veil Glimmer

Dark Galaxy Nebula

Galactic Cloud Glow