Palette

Celestial Nebula Rift

A mystical journey through swirling purples and pinks, capturing the ethereal beauty of distant cosmic clouds.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0C2F#3B0F59#8C40B8#D47AE8#F7C0FF

Palette guide

How to use Celestial Nebula Rift

Overview

The Celestial Nebula Rift palette offers a journey through deep, elegant purples, from the near-black #1A0C2F to the ethereal #F7C0FF. This cool and mystical collection is perfect for designs seeking sophistication and depth. The progression from rich #3B0F59 to the vibrant #8C40B8 and delicate #D47AE8 provides ample opportunity for creating stunning gradients and layered effects. Designers can use this palette to evoke a sense of luxury, mystery, and cosmic wonder, while developers will find the distinct hex codes invaluable for crafting visually cohesive and impactful digital experiences, particularly for high-end or artistic applications.

Best used for

Luxury brand websites or digital magazines
Art gallery or museum online presence
High-end fashion or beauty product packaging
Mystical or spiritual app interfaces
Elegant event invitations and decor
Abstract digital art and motion graphics

Suggested color roles

primary

#3B0F59 sets a deep, sophisticated tone for main content areas or brand identity.

secondary

#8C40B8 provides a more vibrant and engaging purple for headers, interactive elements, or key visuals.

accent

#F7C0FF or #D47AE8 offer a luminous, ethereal highlight, perfect for delicate details, hover states, or subtle glows.

background

#1A0C2F creates a truly profound, dark cosmic canvas, allowing brighter colors to shimmer.

text

Use #F7C0FF or a near-white (e.g., #F8F8F8) for primary text on dark backgrounds to ensure readability.

Accessibility notes

#F7C0FF and #D47AE8 will have excellent contrast against #1A0C2F and #3B0F59 for text.
Be cautious using #8C40B8 for small text on #3B0F59 as the contrast might be borderline for some users.
Ensure all interactive elements meet WCAG contrast guidelines, especially when using lighter purples on mid-tone backgrounds.
Provide alternative text for graphical elements where color conveys critical information, especially for color-blind users.

Recommended combinations

Ethereal Depth

Excellent for hero sections or dramatic visual storytelling, combining deep darks with bright highlights.

#1A0C2F · #8C40B8 · #F7C0FF

Rift Gradient

Ideal for background gradients, creating a smooth and captivating transition across elements.

#3B0F59 · #8C40B8 · #D47AE8

Luminous Touch

Perfect for delicate details, subtle overlays, or highlighting small UI components.

#1A0C2F · #D47AE8 · #F7C0FF

CSS variables

:root {
  --celestial-nebula-rift-1: #1A0C2F;
  --celestial-nebula-rift-2: #3B0F59;
  --celestial-nebula-rift-3: #8C40B8;
  --celestial-nebula-rift-4: #D47AE8;
  --celestial-nebula-rift-5: #F7C0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-nebula-rift": {
        1: "#1A0C2F",
        2: "#3B0F59",
        3: "#8C40B8",
        4: "#D47AE8",
        5: "#F7C0FF",
      }
    }
  }
}

Hex values

Color 1#1A0C2F

Color 2#3B0F59

Color 3#8C40B8

Color 4#D47AE8

Color 5#F7C0FF

Accessibility

Contrast checker

1.2:1Fail

3.1:1AA18

6.8:1AA

12.3:1AAA

1.2:1Fail

2.5:1Fail

5.5:1AA

10:1AAA

3.1:1AA18

2.5:1Fail

2.2:1Fail

3.9:1AA18

6.8:1AA

5.5:1AA

2.2:1Fail

1.8:1Fail

12.3:1AAA

10:1AAA

3.9:1AA18

1.8:1Fail

Similar palettes

More like Celestial Nebula Rift

Celestial Echo Nebula

Celestial Nebula Glow

Stellar Dust Trail