Palette

Celestial Nebula Glow

Explores the shimmering, other-worldly beauty of distant cosmic clouds and stellar dust.

vibrantdark5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Nebula Glow 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 Celestial Nebula Glow.

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

Data visualization

#2A0A3D#4C0D72#7A2EAB#CC7DF4#1F072D

Palette guide

How to use Celestial Nebula Glow

Overview

This Celestial Nebula Glow palette evokes the deep, vibrant hues of distant cosmic phenomena, perfect for designs requiring a mystical and luxurious feel. With a spectrum from the deep, almost black #1F072D to the luminous violet #CC7DF4, it offers a rich contrast. The mid-tones like #4C0D72 and #7A2EAB provide depth, making it ideal for creating immersive digital experiences. Designers can leverage its vibrant purples to convey creativity, spirituality, and sophistication, while developers will appreciate the distinct hex values for precise implementation in UI elements, branding, or atmospheric backgrounds. This palette is a stellar choice for projects aiming for an otherworldly, captivating aesthetic.

Best used for

High-end luxury brand websites or apps
Fantasy or sci-fi game UI/UX
Astrology or spiritual wellness platforms
Event branding for galas or immersive experiences
Dark mode themes for creative applications
Digital art and illustration backgrounds

Suggested color roles

primary

#4C0D72 serves as a strong, deep purple foundation, suitable for main sections or prominent branding.

secondary

#7A2EAB offers a brighter, more engaging purple for interactive elements, headers, or sub-sections.

accent

#CC7DF4 provides a luminous, ethereal glow, perfect for call-to-action buttons, highlights, or subtle animations.

background

#1F072D or #2A0A3D create a profound, dark cosmic backdrop, ensuring other colors pop.

text

Use a light color like #CC7DF4 for primary text on dark backgrounds, or a near-white such as #F0F0F0 for general readability.

Accessibility notes

Ensure sufficient contrast when using #CC7DF4 for text against darker purples like #2A0A3D or #1F072D.
Avoid placing #4C0D72 text directly on #2A0A3D backgrounds as contrast may be insufficient for readability.
For UI elements, use a high contrast ratio (e.g., 4.5:1 for normal text) between interactive components and their backgrounds.
Consider using a very light text color (e.g., white or #CC7DF4) for all body text against the deep background colors.

Recommended combinations

Deep Cosmic

Ideal for dark mode interfaces, showcasing a vibrant accent against a deep, mysterious base.

#1F072D · #4C0D72 · #CC7DF4

Nebula Glow

Excellent for headers and key informational blocks, providing depth with a luminous highlight.

#2A0A3D · #7A2EAB · #CC7DF4

Mystical Gradient

Suited for subtle gradients in hero sections or visual elements that need to transition smoothly.

#4C0D72 · #7A2EAB · #CC7DF4

CSS variables

:root {
  --celestial-nebula-glow-1: #2A0A3D;
  --celestial-nebula-glow-2: #4C0D72;
  --celestial-nebula-glow-3: #7A2EAB;
  --celestial-nebula-glow-4: #CC7DF4;
  --celestial-nebula-glow-5: #1F072D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-nebula-glow": {
        1: "#2A0A3D",
        2: "#4C0D72",
        3: "#7A2EAB",
        4: "#CC7DF4",
        5: "#1F072D",
      }
    }
  }
}

Hex values

Color 1#2A0A3D

Color 2#4C0D72

Color 3#7A2EAB

Color 4#CC7DF4

Color 5#1F072D

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

6.5:1AA

1.1:1Fail

1.3:1Fail

1.7:1Fail

4.9:1AA

1.4:1Fail

2.3:1Fail

1.7:1Fail

2.8:1Fail

2.5:1Fail

6.5:1AA

4.9:1AA

2.8:1Fail

6.9:1AA

1.1:1Fail

1.4:1Fail

2.5:1Fail

6.9:1AA

Similar palettes

More like Celestial Nebula Glow

Cosmic Iridescent Shine