Palette

Northern Lights Dance

A dazzling display of deep purples, greens, and blues, capturing the mystical glow of the aurora borealis.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Northern Lights Dance 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 Northern Lights Dance.

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

Data visualization

#4B0082#8A2BE2#00FF00#00CED1#E0FFFF

Palette guide

How to use Northern Lights Dance

Overview

The Northern Lights Dance palette is a truly vibrant collection, capturing the mystical glow of the aurora borealis with a stunning blend of deep purples, vivid greens, and ethereal blues. Anchored by the rich violet of #4B0082 and the majestic amethyst of #8A2BE2, it introduces the electrifying brightness of #00FF00 (Lime Green) and the serene aquamarine of #00CED1 (Dark Turquoise). The palette is softly illuminated by #E0FFFF (Light Cyan), offering a versatile range for designs that aim to be energetic and captivating. This guide assists designers and developers in leveraging its dynamic contrasts and luminous qualities effectively.

Best used for

Fantasy or sci-fi game UI/UX
Event branding for festivals or concerts
Creative art installations or digital displays
Website backgrounds for entertainment or tech companies
Vibrant social media graphics and campaigns
Youth-focused product packaging

Suggested color roles

primary

Use #4B0082 (Indigo) for strong headers, primary calls-to-action, or main brand elements, providing a deep, mystical foundation.

secondary

Apply #8A2BE2 (Blue Violet) for subheadings, secondary buttons, or to introduce a vibrant yet harmonious contrast to the primary shade.

accent

Deploy #00FF00 (Lime Green) or #00CED1 (Dark Turquoise) for highlights, interactive elements, or graphic details that demand immediate attention.

background

Opt for #4B0082 for a dramatic, dark background, or #E0FFFF (Light Cyan) for a light, ethereal canvas, especially with dark text.

text

For dark backgrounds, use #E0FFFF (Light Cyan) for primary text. For lighter backgrounds, a deep charcoal or black would provide optimal contrast.

Accessibility notes

Ensure sufficient contrast between #4B0082 or #8A2BE2 and #E0FFFF for readability (AA or AAA standards).
Avoid using #00FF00 (Lime Green) directly on #00CED1 (Dark Turquoise) for text, as contrast might be insufficient.
Use #E0FFFF for text on any of the darker purples or blues to maximize legibility.
Consider large text sizes or bolding when using mid-tone colors like #8A2BE2 for body copy.

Recommended combinations

Mystic Glow

Ideal for hero sections or captivating digital art, with the deep purple grounding vibrant green accents on a light, airy background.

#4B0082 · #00FF00 · #E0FFFF

Aurora Contrast

Excellent for defining interactive elements or data visualizations, where varying shades create depth and visual interest.

#8A2BE2 · #00CED1 · #4B0082

Energetic Flare

Perfect for energetic illustrations or highlights on a light base, evoking a fresh and dynamic feel.

#E0FFFF · #00FF00 · #00CED1

CSS variables

:root {
  --northern-lights-dance-2-1: #4B0082;
  --northern-lights-dance-2-2: #8A2BE2;
  --northern-lights-dance-2-3: #00FF00;
  --northern-lights-dance-2-4: #00CED1;
  --northern-lights-dance-2-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-dance-2": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#00FF00",
        4: "#00CED1",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#00FF00

Color 4#00CED1

Color 5#E0FFFF

Accessibility

Contrast checker

2.2:1Fail

9.4:1AAA

6.6:1AA

12.3:1AAA

2.2:1Fail

4.3:1AA18

3:1AA18

5.7:1AA

9.4:1AAA

4.3:1AA18

1.4:1Fail

1.3:1Fail

6.6:1AA

3:1AA18

1.4:1Fail

1.9:1Fail

12.3:1AAA

5.7:1AA

1.3:1Fail

1.9:1Fail

Similar palettes

More like Northern Lights Dance

View all vibrant

Celestial Veil Dance

Cosmic Aurora Shimmer

Northern Lights Magic

Polar Light Specter

Spectral Sky Dance

Aurora Borealis Glow