Palette

Midnight Aurora Glide

Deep nocturnal blues and purples ascend into a celestial glow, mimicking the mysterious northern lights.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Aurora Glide 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 Midnight Aurora Glide.

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

Data visualization

#0C0E28#2E1E5F#5A2C8F#A37BCE#DAF0FF

Palette guide

How to use Midnight Aurora Glide

Overview

The Midnight Aurora Glide palette features deep nocturnal blues and purples ascending into a celestial glow, mimicking the mysterious northern lights. With a profound #0C0E28 (dark indigo), rich #2E1E5F (deep violet), vibrant #5A2C8F (amethyst), luminous #A37BCE (light purple), and ethereal #DAF0FF (light blue), this palette is perfect for designers aiming to create a magical, elegant, and cosmic aesthetic. The progression from deep, dark tones to airy, bright hues offers incredible depth and versatility. It's an excellent choice for projects requiring a sense of wonder, luxury, or otherworldly beauty, suitable for high-end branding, digital art, or immersive web experiences that captivate the user.

Best used for

Luxury event branding and invitations
Science fiction or fantasy game design
Cosmetic or beauty product packaging
Digital art and abstract illustration
Space exploration or astronomy websites
High-tech product showcases

Suggested color roles

primary

Use #0C0E28 as a dominant primary for backgrounds or foundational elements, creating a deep, cosmic base.

secondary

Apply #2E1E5F for supporting sections, card backgrounds, or to introduce a rich, vibrant depth.

accent

Highlight with #DAF0FF for ethereal glows, interactive elements, or to simulate light sources.

background

Employ #0C0E28 or #2E1E5F for main backgrounds, providing a dark, immersive canvas.

text

Utilize #DAF0FF or #A37BCE for primary body text, ensuring excellent readability against darker backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing #DAF0FF or #A37BCE with #0C0E28 or #2E1E5F.
Avoid using #5A2C8F text on #2E1E5F as their similar luminance can cause readability issues.
Always test text against backgrounds to ensure WCAG AA compliance, especially with the glowing lighter shades.
For critical information, use #DAF0FF on #0C0E28 for maximum legibility in a dark, ethereal theme.

Recommended combinations

Cosmic Depth

Ideal for captivating headers, hero sections, or illustrations that need a dramatic, glowing effect.

#0C0E28 · #DAF0FF · #5A2C8F

Aurora Glow

Excellent for background gradients, subtle UI elements, or sections needing an otherworldly shimmer.

#2E1E5F · #A37BCE · #DAF0FF

Mystic Elegance

Creates a sophisticated yet magical look for navigation, footers, or branding elements.

#5A2C8F · #0C0E28 · #A37BCE

CSS variables

:root {
  --midnight-aurora-glide-1: #0C0E28;
  --midnight-aurora-glide-2: #2E1E5F;
  --midnight-aurora-glide-3: #5A2C8F;
  --midnight-aurora-glide-4: #A37BCE;
  --midnight-aurora-glide-5: #DAF0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-aurora-glide": {
        1: "#0C0E28",
        2: "#2E1E5F",
        3: "#5A2C8F",
        4: "#A37BCE",
        5: "#DAF0FF",
      }
    }
  }
}

Hex values

Color 1#0C0E28

Color 2#2E1E5F

Color 3#5A2C8F

Color 4#A37BCE

Color 5#DAF0FF

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

5.7:1AA

16.1:1AAA

1.3:1Fail

1.5:1Fail

4.3:1AA18

12.2:1AAA

2:1Fail

1.5:1Fail

2.9:1Fail

8.2:1AAA

5.7:1AA

4.3:1AA18

2.9:1Fail

2.8:1Fail

16.1:1AAA

12.2:1AAA

8.2:1AAA

2.8:1Fail

Similar palettes

More like Midnight Aurora Glide

View all cool

Starlight Symphony Night

Astral Glow Nebula

Celestial Comet Dust

Celestial Dawn Hues

Celestial Echo Nebula

Celestial Nebula Glow