Palette

Cosmic Galaxy Haze

Deep space purples and blues, evoking the swirling beauty of distant galaxies.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Galaxy Haze 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 Galaxy Haze.

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

Data visualization

#0F0F2A#2E2A4F#5D4B8C#8B7BCD#B3A4E0

Palette guide

How to use Cosmic Galaxy Haze

Overview

The Cosmic Galaxy Haze palette features deep space purples and blues, evoking the swirling beauty of distant galaxies. Ranging from the profound #0F0F2A to the soft #B3A4E0, this collection is perfect for designers creating dreamy, mysterious, and visually harmonious digital experiences. It's particularly suitable for fantasy-themed interfaces, abstract art, or branding that seeks to convey wonder and depth. Developers can integrate these versatile hex codes, such as the rich #5D4B8C, to build visually compelling applications and websites, ensuring a consistent and enchanting user experience across various digital platforms.

Best used for

Fantasy game UI/UX
Mystical digital illustrations
Dreamy website designs
Abstract art portfolios
Ethereal event branding
Science fiction concept art

Suggested color roles

primary

#2E2A4F - A strong, deep purple-blue that serves as an excellent base for large sections or main content areas.

secondary

#5D4B8C - A vibrant mid-tone purple, suitable for supporting elements, secondary buttons, or data visualization.

accent

#8B7BCD - A luminous, softer purple, ideal for drawing attention to calls to action, highlights, or subtle glow effects.

background

#0F0F2A - The deepest, most foundational color, perfect for immersive dark backgrounds that allow lighter elements to glow.

text

#B3A4E0 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 #5D4B8C on #2E2A4F.
Always use #B3A4E0 or white for body text on #0F0F2A and #2E2A4F to meet WCAG AA standards.
Be cautious with contrast when layering #8B7BCD over #5D4B8C for crucial UI elements.
Test interactive elements for adequate contrast to ensure usability for users with visual impairments.

Recommended combinations

Nebula Gradient

Creates a smooth, ethereal transition for backgrounds or atmospheric visual elements.

#0F0F2A · #2E2A4F · #5D4B8C

Celestial Highlight

Perfect for drawing attention to key features or calls to action with a soft, shimmering contrast.

#2E2A4F · #8B7BCD · #B3A4E0

Dreamy Layers

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

#0F0F2A · #5D4B8C · #B3A4E0

CSS variables

:root {
  --cosmic-galaxy-haze-1: #0F0F2A;
  --cosmic-galaxy-haze-2: #2E2A4F;
  --cosmic-galaxy-haze-3: #5D4B8C;
  --cosmic-galaxy-haze-4: #8B7BCD;
  --cosmic-galaxy-haze-5: #B3A4E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-galaxy-haze": {
        1: "#0F0F2A",
        2: "#2E2A4F",
        3: "#5D4B8C",
        4: "#8B7BCD",
        5: "#B3A4E0",
      }
    }
  }
}

Hex values

Color 1#0F0F2A

Color 2#2E2A4F

Color 3#5D4B8C

Color 4#8B7BCD

Color 5#B3A4E0

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

5.2:1AA

8.3:1AAA

1.4:1Fail

1.8:1Fail

3.7:1AA18

6:1AA

2.5:1Fail

1.8:1Fail

2:1Fail

3.3:1AA18

5.2:1AA

3.7:1AA18

2:1Fail

1.6:1Fail

8.3:1AAA

6:1AA

3.3:1AA18

1.6:1Fail

Similar palettes

More like Cosmic Galaxy Haze

View all dark

Deep Space Reverie

Celestial Abyss Gaze

Celestial Glimmer Dust

Celestial Reverie

Celestial Star Veil

Cosmic Abyss Echo