Palette

Celestial Nebula Hues

A cosmic blend reflecting the vibrant gases and dust clouds of a distant star-forming region.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A2BE2#4B0082#FF69B4#ADD8E6#191970

Palette guide

How to use Celestial Nebula Hues

Overview

The Celestial Nebula Hues palette is a vibrant and energetic collection, capturing the dynamic essence of cosmic gases and stardust. It features a striking contrast between deep indigos like #191970 and vivid purples such as #8A2BE2, punctuated by a brilliant hot pink #FF69B4 and a serene light blue #ADD8E6. This palette is perfect for designs that aim to be bold, modern, and otherworldly. Developers can use these distinct hex codes to build engaging interfaces, while designers can craft visually arresting graphics that demand attention, reflecting a playful yet sophisticated galactic theme.

Best used for

Youth-oriented tech brands or apps
Fashion and beauty websites with a modern edge
Event promotions for music festivals or creative conferences
Digital art portfolios or creative blogs
Interactive learning platforms for astronomy
Sci-fi themed product packaging

Suggested color roles

primary

#8A2BE2 offers a strong, captivating purple for main content areas or brand identity.

secondary

#4B0082 provides a deep, rich indigo for supporting sections, footers, or background accents.

accent

#FF69B4 is a vibrant, energetic hot pink, ideal for call-to-actions, alerts, or key visual highlights.

background

#191970 creates a deep, mysterious base, allowing brighter colors to shine, or #ADD8E6 for a lighter, airy feel.

text

For dark backgrounds, use #ADD8E6 or white. For light backgrounds, use #191970 or black.

Accessibility notes

Ensure #FF69B4 has sufficient contrast against any background, especially if used for important text.
#ADD8E6 (light blue) should not be used for small text on very light backgrounds.
Text in #8A2BE2 might lack contrast on #4B0082; test readability carefully.
Prioritize white or near-white text on #191970 for maximum readability for body content.

Recommended combinations

Galactic Pop

A dynamic trio for hero sections or product showcases, combining depth with energetic highlights.

#191970 · #8A2BE2 · #FF69B4

Nebula Contrast

Effective for data visualization or infographics, using light and dark contrast with a vivid accent.

#4B0082 · #ADD8E6 · #FF69B4

Cosmic Dream

Creates a serene yet deep aesthetic, suitable for intros or calming interface elements.

#8A2BE2 · #ADD8E6 · #191970

CSS variables

:root {
  --celestial-nebula-hues-1: #8A2BE2;
  --celestial-nebula-hues-2: #4B0082;
  --celestial-nebula-hues-3: #FF69B4;
  --celestial-nebula-hues-4: #ADD8E6;
  --celestial-nebula-hues-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-nebula-hues": {
        1: "#8A2BE2",
        2: "#4B0082",
        3: "#FF69B4",
        4: "#ADD8E6",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#4B0082

Color 3#FF69B4

Color 4#ADD8E6

Color 5#191970

Accessibility

Contrast checker

2.2:1Fail

2.3:1Fail

3.9:1AA18

2.5:1Fail

2.2:1Fail

4.9:1AA

8.5:1AAA

1.1:1Fail

2.3:1Fail

4.9:1AA

1.7:1Fail

5.6:1AA

3.9:1AA18

8.5:1AAA

1.7:1Fail

9.7:1AAA

2.5:1Fail

1.1:1Fail

5.6:1AA

9.7:1AAA

Similar palettes

More like Celestial Nebula Hues

Cosmic Aurora Shimmer

Cosmic Glow Dust

Galactic Bloom Sparkle