Palette

Nebula Galaxy Swirl

A mesmerizing journey through deep space, with swirling nebulas of cosmic dust and distant starlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nebula Galaxy 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 Nebula Galaxy Swirl.

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

Data visualization

#150030#2A0251#4A076E#791E8F#F7E0FF

Palette guide

How to use Nebula Galaxy Swirl

Overview

The Nebula Galaxy Swirl palette offers a mesmerizing journey through deep space, with swirling nebulas of cosmic dust and distant starlight. Featuring the profound #150030, the rich #2A0251, the vibrant #4A076E, the intense #791E8F, and the sparkling #F7E0FF, this collection is perfect for designs that aim for a mysterious, luxurious, and cosmic feel. Designers can use the deep purples for foundational elements and the near-white for striking accents or highlights. Developers will find this palette excellent for creating sophisticated dark mode interfaces, captivating branding, or any digital experience that benefits from a sense of infinite wonder and elegance. It’s a truly captivating and versatile dark palette.

Best used for

Luxury brand websites and apps
Sci-fi movie posters or trailers
High-end event invitations
Astrology or spiritual platforms
Dark mode UI/UX designs
Digital art and illustration

Suggested color roles

primary

Utilize #150030 as the dominant background color to establish a deep, immersive cosmic canvas.

secondary

Apply #2A0251 for secondary content areas or large text blocks, offering subtle depth.

accent

Highlight interactive elements or key information with #F7E0FF for a sparkling, high-contrast pop.

background

The deepest shade, #150030, is excellent for an immersive, dark background, enhancing content with contrast.

text

For optimal readability on darker shades, use white or a very light gray like #F7E0FF.

Accessibility notes

White or #F7E0FF text on #150030, #2A0251, and #4A076E provides excellent contrast and readability.
Ensure sufficient contrast when using #791E8F for text on #F7E0FF; test for WCAG AA compliance.
Avoid using #4A076E for small text on #2A0251 without careful contrast verification.
The #F7E0FF shade is light enough to support dark gray or black text for optimal accessibility if used as a background.

Recommended combinations

Deep Galaxy

Creates a seamless dark gradient, ideal for website hero sections or app onboarding screens.

#150030 · #2A0251 · #4A076E

Starlight Sparkle

Provides strong contrast for text or icons against a dark base, perfect for highlights and calls to action.

#150030 · #791E8F · #F7E0FF

Cosmic Aura

Offers a sophisticated purple progression, suitable for elegant data visualizations or subtle branding elements.

#2A0251 · #4A076E · #791E8F

CSS variables

:root {
  --nebula-galaxy-swirl-1: #150030;
  --nebula-galaxy-swirl-2: #2A0251;
  --nebula-galaxy-swirl-3: #4A076E;
  --nebula-galaxy-swirl-4: #791E8F;
  --nebula-galaxy-swirl-5: #F7E0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-galaxy-swirl": {
        1: "#150030",
        2: "#2A0251",
        3: "#4A076E",
        4: "#791E8F",
        5: "#F7E0FF",
      }
    }
  }
}

Hex values

Color 1#150030

Color 2#2A0251

Color 3#4A076E

Color 4#791E8F

Color 5#F7E0FF

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2.2:1Fail

15.9:1AAA

1.1:1Fail

1.3:1Fail

2:1Fail

13.9:1AAA

1.4:1Fail

1.3:1Fail

1.5:1Fail

11:1AAA