Palette

Celestial Aurora Hues

A breathtaking spectrum of deep purples, magentas, and oranges, inspired by the dancing aurora lights.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C0F4A#5A1F70#9D3C7D#E06F6F#F7AE72

Palette guide

How to use Celestial Aurora Hues

Overview

The Celestial Aurora Hues palette offers a breathtaking spectrum of deep purples, magentas, and warm oranges, inspired by the dancing aurora lights. It transitions from a profound #2C0F4A and a rich #5A1F70, through a vibrant magenta #9D3C7D. The warm, inviting #E06F6F and the glowing #F7AE72 complete this energetic collection. This palette is incredibly useful for designers and developers aiming to create projects that are vibrant, mystical, and full of warmth and intrigue. It's ideal for dynamic digital experiences, artistic branding, or any design needing to convey passion and cosmic beauty.

Best used for

Dynamic event promotions (music, art shows)
Artistic portfolio websites
Mystical or fantasy-themed digital products
Bold fashion or beauty branding
Vibrant social media graphics
Interactive educational content

Suggested color roles

primary

#2C0F4A - A deep, dark purple, ideal for expansive backgrounds, headers, or main structural elements, providing a strong, mysterious foundation.

secondary

#5A1F70 - Use for subheadings, navigation, or large content blocks, offering a rich purple that adds depth and warmth.

accent

#F7AE72 - A glowing, warm orange, perfect for call-to-action buttons, interactive elements, or striking visual highlights.

background

#2C0F4A - Creates an immersive dark canvas, allowing the vibrant magentas and oranges to truly pop.

text

#F7AE72 - A warm, glowing orange that offers excellent contrast and a vibrant feel against the dark purples, suitable for headings and key information.

Accessibility notes

Ensure white or #F7AE72 text on #2C0F4A background meets WCAG AAA contrast for readability.
#E06F6F text on #9D3C7D or #F7AE72 on #E06F6F will have insufficient contrast; avoid for critical text.
For body text, consider a light gray or white on darker backgrounds to ensure legibility.
Use #9D3C7D as an accent, as its contrast on lighter shades might be low.

Recommended combinations

Cosmic Sunset

Deep purple base with a vibrant magenta content area and a warm orange for accents.

#2C0F4A · #9D3C7D · #F7AE72

Aurora Flames

Rich purple for main elements, a warm red-orange for key features, and deep purple for grounding.

#5A1F70 · #E06F6F · #2C0F4A

Radiant Night

Strong dark background with warm red-orange and glowing orange for an energetic, fiery effect.

#2C0F4A · #E06F6F · #F7AE72

CSS variables

:root {
  --celestial-aurora-hues-1: #2C0F4A;
  --celestial-aurora-hues-2: #5A1F70;
  --celestial-aurora-hues-3: #9D3C7D;
  --celestial-aurora-hues-4: #E06F6F;
  --celestial-aurora-hues-5: #F7AE72;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-aurora-hues": {
        1: "#2C0F4A",
        2: "#5A1F70",
        3: "#9D3C7D",
        4: "#E06F6F",
        5: "#F7AE72",
      }
    }
  }
}

Hex values

Color 1#2C0F4A

Color 2#5A1F70

Color 3#9D3C7D

Color 4#E06F6F

Color 5#F7AE72

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

5.2:1AA

8.8:1AAA

1.5:1Fail

1.8:1Fail

3.6:1AA18

6:1AA

2.6:1Fail

1.8:1Fail

2:1Fail

3.3:1AA18