Palette

Astral Glow Nebula

An enchanting palette mirroring the mystical purples and deep voids of a distant nebula.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#523A70#7B5C9F#9C7EC2#D0BBEA#302048

Palette guide

How to use Astral Glow Nebula

Overview

The Astral Glow Nebula palette is an enchanting collection mirroring the mystical purples and deep voids of a distant nebula. Featuring the profound #302048 and #523A70, it flows into the ethereal #7B5C9F and #9C7EC2, culminating in the soft lavender of #D0BBEA. This cosmic and elegant palette is ideal for designers and developers creating luxury branding, sci-fi fantasy art, or sophisticated web interfaces that require a touch of magic and mystery. Its harmonious blend of purples offers depth and glow, perfect for immersive digital experiences.

Best used for

Elegant branding and identity
Mystical themed websites
Luxury packaging design
Sci-fi fantasy digital art
Sophisticated web interfaces
Event invitations and decor

Suggested color roles

primary

#302048 serves as a deep, mysterious primary color, ideal for main backgrounds and foundational design elements.

secondary

#523A70 provides a rich, supportive purple, excellent for secondary content areas or navigation.

accent

#9C7EC2 offers a glowing highlight, perfect for interactive elements, icons, or subtle decorative details.

background

#302048 creates an immersive dark background, providing depth and allowing lighter elements to shimmer.

text

#D0BBEA ensures excellent readability for primary text on dark backgrounds, or use a crisp white for maximum impact.

Accessibility notes

Ensure high contrast for text, especially #D0BBEA on #302048, to meet WCAG AA standards.
Use lighter shades for interactive elements to improve visibility and usability on dark backgrounds.
Test readability across various screen brightness settings, as dark themes can be challenging in bright environments.
Provide clear focus states for interactive components to enhance user navigation.

Recommended combinations

Nebula Core

A core dark mode combination, offering depth and clear readability for primary content.

#302048 · #523A70 · #D0BBEA

Ethereal Glow

Creates a luminous, layered effect, ideal for atmospheric UI components or artistic backgrounds.

#7B5C9F · #9C7EC2 · #302048

Cosmic Depth

Perfect for subtle gradients or layered elements, evoking the vastness of space with elegant transitions.

#523A70 · #9C7EC2 · #D0BBEA

CSS variables

:root {
  --astral-glow-nebula-1: #523A70;
  --astral-glow-nebula-2: #7B5C9F;
  --astral-glow-nebula-3: #9C7EC2;
  --astral-glow-nebula-4: #D0BBEA;
  --astral-glow-nebula-5: #302048;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-glow-nebula": {
        1: "#523A70",
        2: "#7B5C9F",
        3: "#9C7EC2",
        4: "#D0BBEA",
        5: "#302048",
      }
    }
  }
}

Hex values

Color 1#523A70

Color 2#7B5C9F

Color 3#9C7EC2

Color 4#D0BBEA

Color 5#302048

Accessibility

Contrast checker

1.8:1Fail

2.8:1Fail

5.4:1AA

1.5:1Fail

1.8:1Fail

1.6:1Fail

3.1:1AA18

2.7:1Fail

2.8:1Fail

1.6:1Fail

1.9:1Fail

4.3:1AA18

5.4:1AA

3.1:1AA18

1.9:1Fail

8.4:1AAA

1.5:1Fail

2.7:1Fail

4.3:1AA18

8.4:1AAA

Similar palettes

More like Astral Glow Nebula

View all cool

Celestial Echo Nebula

Celestial Nebula Glow

Celestial Nebula Rift

Stellar Dust Trail

Stellar Nebula Dust

Celestial Comet Dust