Palette

Astral Nebula Bloom

A breathtaking array of deep purples and pinks, evoking the mystical and expanding colors of a distant nebula.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#120A2F#3C1E70#7E3FA3#C06FE8#FFC6FF

Palette guide

How to use Astral Nebula Bloom

Overview

The Astral Nebula Bloom palette is a breathtaking array of deep purples and pinks, evoking the mystical and expanding colors of a distant nebula. From the profound indigo of #120A2F, through rich #3C1E70 and vibrant #7E3FA3, to the glowing #C06FE8 and brightest #FFC6FF. This vibrant and fantasy-driven palette is perfect for designers and developers creating immersive game environments, dynamic event branding, or any digital experience that demands energetic, otherworldly visuals. Its bold contrasts and luminous shades create a sense of wonder and excitement, ideal for captivating audiences.

Best used for

Fantasy game art and themes
Vibrant event branding
Creative agency websites
Pop culture designs
Mystical digital illustrations
Energetic app themes

Suggested color roles

primary

#120A2F serves as a deep, dramatic primary color, ideal for main backgrounds and foundational elements.

secondary

#3C1E70 provides a rich, supportive purple, excellent for secondary content areas or navigation.

accent

#C06FE8 offers a vibrant, blooming highlight, perfect for interactive elements, icons, or decorative details.

background

#120A2F creates an immersive dark background, providing depth and allowing brighter elements to truly bloom.

text

#FFC6FF 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 #FFC6FF on #120A2F, to meet WCAG AA standards.
Avoid using similar vibrant shades for interactive elements without sufficient differentiation.
Test for color blindness compatibility, as purple and pink shades can be challenging for some users.
Provide clear interactive states using distinct colors to guide users effectively.

Recommended combinations

Nebula Core

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

#120A2F · #3C1E70 · #FFC6FF

Vibrant Bloom

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

#7E3FA3 · #C06FE8 · #120A2F

Cosmic Pop

Perfect for vibrant accents or dynamic sections, evoking the energetic expansion of a nebula.

#3C1E70 · #C06FE8 · #FFC6FF

CSS variables

:root {
  --astral-nebula-bloom-1: #120A2F;
  --astral-nebula-bloom-2: #3C1E70;
  --astral-nebula-bloom-3: #7E3FA3;
  --astral-nebula-bloom-4: #C06FE8;
  --astral-nebula-bloom-5: #FFC6FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-nebula-bloom": {
        1: "#120A2F",
        2: "#3C1E70",
        3: "#7E3FA3",
        4: "#C06FE8",
        5: "#FFC6FF",
      }
    }
  }
}

Hex values

Color 1#120A2F

Color 2#3C1E70

Color 3#7E3FA3

Color 4#C06FE8

Color 5#FFC6FF

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

6:1AA

13.3:1AAA

1.5:1Fail

1.9:1Fail

4.1:1AA18

9.2:1AAA

2.8:1Fail

1.9:1Fail

2.1:1Fail

4.7:1AA

6:1AA

4.1:1AA18

2.1:1Fail

2.2:1Fail

13.3:1AAA

9.2:1AAA

4.7:1AA

2.2:1Fail

Similar palettes

More like Astral Nebula Bloom

Celestial Nebula Hues