Palette

Northern Lights Dream

Captures the breathtaking, ephemeral dance of the Aurora Borealis across the dark night sky.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FF7F#2A0A4A#9932CC#00CED1#0A0A0A

Palette guide

How to use Northern Lights Dream

Overview

The Northern Lights Dream palette captures the breathtaking, ephemeral dance of the Aurora Borealis across the dark night sky with an elegant, vibrant flair. It masterfully combines the electrifying #00FF7F (Spring Green) with the profound depth of #2A0A4A (Dark Purple) and the regal #9932CC (Dark Orchid). The serene #00CED1 (Dark Turquoise) adds a cool, watery contrast, all grounded by the stark #0A0A0A (Rich Black). This palette is perfect for designers and developers aiming to create captivating, elegant, and memorable digital experiences that evoke wonder and a touch of mystique.

Best used for

Luxury brand websites or applications
High-end event invitations or branding
Abstract art or digital installations
Dark mode UI/UX designs
Fashion or jewelry e-commerce platforms
Creative portfolio websites

Suggested color roles

primary

Utilize #0A0A0A (Rich Black) for a strong, sophisticated base or main text, providing ultimate contrast.

secondary

Apply #2A0A4A (Dark Purple) for background sections, large elements, or as a deep, rich container for content.

accent

Deploy #00FF7F (Spring Green) or #00CED1 (Dark Turquoise) for calls-to-action, interactive elements, or striking visual highlights.

background

The deep #0A0A0A or #2A0A4A offers a dramatic canvas, making the vibrant greens and turquoises truly pop.

text

For dark backgrounds, #00FF7F or #00CED1 can be used for headings, while a crisp white or near-white ensures readability for body text.

Accessibility notes

Ensure sufficient contrast between vibrant accents like #00FF7F and dark backgrounds like #0A0A0A for text accessibility.
Avoid placing #9932CC directly on #2A0A4A for small text, as their similar value might reduce readability.
Using white or very light grey text on #0A0A0A and #2A0A4A will meet WCAG AA standards easily.
The bright #00FF7F may cause eye strain if used for large blocks of text; reserve it for accents and interactive elements.

Recommended combinations

Mystic Night

Perfect for dramatic hero sections, combining a deep black background with vibrant green highlights and a regal purple accent.

#0A0A0A · #00FF7F · #9932CC

Ethereal Glow

Ideal for interactive elements or visualizers, where the cool turquoise and vibrant green create a dynamic, glowing effect on a dark purple.

#2A0A4A · #00CED1 · #00FF7F

Elegant Depth

Suitable for sophisticated branding, using the dark orchid as a primary color, grounded by black, with a cool turquoise accent.

#9932CC · #0A0A0A · #00CED1

CSS variables

:root {
  --northern-lights-dream-1: #00FF7F;
  --northern-lights-dream-2: #2A0A4A;
  --northern-lights-dream-3: #9932CC;
  --northern-lights-dream-4: #00CED1;
  --northern-lights-dream-5: #0A0A0A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-dream": {
        1: "#00FF7F",
        2: "#2A0A4A",
        3: "#9932CC",
        4: "#00CED1",
        5: "#0A0A0A",
      }
    }
  }
}

Hex values

Color 1#00FF7F

Color 2#2A0A4A

Color 3#9932CC

Color 4#00CED1

Color 5#0A0A0A

Accessibility

Contrast checker

12.6:1AAA

4.2:1AA18

1.5:1Fail

14.7:1AAA

12.6:1AAA

3:1Fail

8.7:1AAA

1.2:1Fail

4.2:1AA18

3:1Fail

2.9:1Fail

3.5:1AA18

1.5:1Fail

8.7:1AAA

2.9:1Fail

10.1:1AAA

14.7:1AAA

1.2:1Fail

3.5:1AA18

10.1:1AAA

Similar palettes

More like Northern Lights Dream

View all vibrant

Aurora Borealis Dream

Amethyst Aura

Cosmic Dust Swirl

Crystal Geode Sparkle

Emerald City Glaze

Emerald City Gleam