Palette

Polar Lights Display

The ethereal dance of colors across the night sky, a spectacular display of cool, mystical brilliance.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Polar Lights Display 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 Polar Lights Display.

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

Data visualization

#0F0F2D#00FF7F#00BFFF#8A2BE2#ADD8E6

Palette guide

How to use Polar Lights Display

Overview

The Polar Lights Display palette captures the mystical and awe-inspiring spectacle of the aurora borealis, featuring a dramatic blend of deep night blues, vibrant greens, and striking purples. It begins with an intensely dark, almost black navy, #0F0F2D, providing a profound backdrop for the celestial show. A brilliant emerald green, #00FF7F, and a vivid sky blue, #00BFFF, introduce a captivating luminosity, mirroring the core glow of the lights. A rich, mystical violet, #8A2BE2, adds an enchanting depth, while a soft, light blue, #ADD8E6, provides a delicate, ethereal shimmer. This palette is ideal for designs that aim to be mystical, captivating, and visually dramatic, evoking a sense of wonder and cosmic beauty.

Best used for

Fantasy game environments
Mystical themed events
Space exploration documentaries
Digital art and abstract design
Night sky photography displays
Entertainment and media branding

Suggested color roles

primary

#0F0F2D (Deep Night Blue) - Use as a dominant background or for large foundational elements to establish a dark, mysterious, and immersive canvas.

secondary

#00BFFF (Vivid Sky Blue) - Ideal for headings, key visual elements, or as a strong accent to draw attention with its bright and expansive quality.

accent

#00FF7F (Brilliant Emerald) - Reserve for calls-to-action, glowing effects, or critical interactive elements to create a dazzling, high-energy highlight.

background

#0F0F2D (Deep Night Blue) - Creates an immersive, dark, and dramatic backdrop that makes the vibrant greens, blues, and purples truly pop with celestial brilliance.

text

#ADD8E6 (Light Blue) - Excellent for headings and important text over the dark primary or secondary colors. For body text, a pure white or very light gray would offer maximum readability and ensure accessibility.

Accessibility notes

Ensure sufficient contrast when using #ADD8E6 for text on backgrounds that are not #0F0F2D or other very dark shades.
The vibrant #00FF7F and #00FF7F are excellent for accents but should be used sparingly for text to avoid eye strain.
Avoid using #8A2BE2 for text on backgrounds that are too close in value to avoid readability issues.
Always test color combinations for WCAG AA compliance, especially for interactive elements and critical information.

Recommended combinations

Cosmic Glow

A high-impact combination for hero sections or captivating visuals, emphasizing the glowing green against a dark sky.

#0F0F2D · #00FF7F · #ADD8E6

Mystical Dance

Perfect for creating layered cosmic scenes or abstract art, offering a dynamic interplay of cool blues and vibrant violet.

#0F0F2D · #00BFFF · #8A2BE2

Ethereal Light

A balanced trio for informational displays or subtle branding, combining lightness with deep anchoring colors.

#ADD8E6 · #00BFFF · #0F0F2D

CSS variables

:root {
  --polar-lights-display-1: #0F0F2D;
  --polar-lights-display-2: #00FF7F;
  --polar-lights-display-3: #00BFFF;
  --polar-lights-display-4: #8A2BE2;
  --polar-lights-display-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "polar-lights-display": {
        1: "#0F0F2D",
        2: "#00FF7F",
        3: "#00BFFF",
        4: "#8A2BE2",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#0F0F2D

Color 2#00FF7F

Color 3#00BFFF

Color 4#8A2BE2

Color 5#ADD8E6

Accessibility

Contrast checker

13.9:1AAA

8.8:1AAA

3.1:1AA18

12.2:1AAA

13.9:1AAA

1.6:1Fail

4.4:1AA18

1.1:1Fail

8.8:1AAA

1.6:1Fail

2.8:1Fail

1.4:1Fail

3.1:1AA18

4.4:1AA18

2.8:1Fail

3.9:1AA18

12.2:1AAA

1.1:1Fail

1.4:1Fail

3.9:1AA18

Similar palettes

More like Polar Lights Display

View all cool

Celestial Aurora Dream

Celestial Aurora Whisper