Palette

Northern Lights Dance

Shimmering northern lights over a dark, tranquil arctic landscape, full of cool mystery.

coolcalm5 colors

More cool 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

#0A0A0A#172A3A#0B6E4F#2A9D8F#8EDCDE

Palette guide

How to use Northern Lights Dance

Overview

The Northern Lights Dance palette captures the cool, tranquil mystery of an arctic landscape bathed in shimmering aurora. This sophisticated collection blends deep, grounding tones with ethereal lights, starting with the near-black #0A0A0A and the profound #172A3A (Prussian Blue). It elegantly transitions into the rich forest green of #0B6E4F and the captivating teal of #2A9D8F, culminating in the serene, almost icy blue of #8EDCDE. Designers and developers can utilize this palette to craft experiences that are both calm and deeply engaging, perfect for conveying a sense of cool elegance and natural wonder.

Best used for

Luxury eco-tourism branding
Nature documentary film aesthetics
High-end spa or wellness app design
Corporate websites seeking a sophisticated, calm feel
Art gallery or museum digital interfaces
Winter-themed event invitations

Suggested color roles

primary

Use #0A0A0A (Rich Black) or #172A3A (Prussian Blue) as a dominant background or for strong foundational elements, providing depth.

secondary

Apply #0B6E4F (Forest Green) or #2A9D8F (Teal) for subheadings, navigation, or significant graphical areas to introduce cool, organic tones.

accent

Employ #8EDCDE (Light Blue) for highlights, interactive states, or subtle glows, mimicking the ethereal quality of the aurora.

background

A deep background like #0A0A0A or #172A3A provides an excellent canvas for lighter colors to shimmer, while #8EDCDE can be a light, airy base.

text

On dark backgrounds, #8EDCDE offers excellent readability. For lighter elements, use #0A0A0A or a dark charcoal for striking contrast.

Accessibility notes

Ensure high contrast when pairing #8EDCDE with any of the darker shades for body text (e.g., #0A0A0A, #172A3A).
Avoid using #0B6E4F or #2A9D8F for small text on dark backgrounds without sufficient size or weight.
Consider using a near-white text on #0A0A0A for optimal readability in primary content.
Test color blindness compatibility, especially with the green and teal shades, to ensure distinction.

Recommended combinations

Arctic Night

Ideal for dark mode interfaces or serene hero sections, where the teal and light blue 'shimmer' against a deep night sky.

#0A0A0A · #2A9D8F · #8EDCDE

Forest Depths

Excellent for natural-themed branding or content blocks, combining deep blue and green with a refreshing highlight.

#172A3A · #0B6E4F · #8EDCDE

Mystic Horizon

Use for gradients or layered graphics that evoke depth and transition, perfect for backgrounds or abstract visuals.

#0B6E4F · #2A9D8F · #172A3A

CSS variables

:root {
  --northern-lights-dance-1: #0A0A0A;
  --northern-lights-dance-2: #172A3A;
  --northern-lights-dance-3: #0B6E4F;
  --northern-lights-dance-4: #2A9D8F;
  --northern-lights-dance-5: #8EDCDE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-dance": {
        1: "#0A0A0A",
        2: "#172A3A",
        3: "#0B6E4F",
        4: "#2A9D8F",
        5: "#8EDCDE",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#172A3A

Color 3#0B6E4F

Color 4#2A9D8F

Color 5#8EDCDE

Accessibility

Contrast checker

1.3:1Fail

3.2:1AA18

6:1AA

12.7:1AAA

1.3:1Fail

2.4:1Fail

4.4:1AA18

9.4:1AAA

3.2:1AA18

2.4:1Fail

1.9:1Fail

4:1AA18

6:1AA

4.4:1AA18

1.9:1Fail

2.1:1Fail

12.7:1AAA

9.4:1AAA

4:1AA18

2.1:1Fail

Similar palettes

More like Northern Lights Dance

View all cool

Northern Glimmer

Arctic Explorer's Dream