Back to palettes

Palette

Northern Lights Serene

A cool, muted interpretation of the aurora, blending deep blues and purples with soft, ethereal greens.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#004080#36454F#ADD8E6#D8BFD8

Palette guide

How to use Northern Lights Serene

Overview

The Northern Lights Serene palette offers a cool, muted interpretation of the aurora, blending deep blues and purples with soft, ethereal tones. It starts with the profound #000033 (Midnight Blue) and the calming #004080 (Dark Cerulean), setting a tranquil, night-sky foundation. The addition of #36454F (Charcoal) provides a sophisticated neutral, while #ADD8E6 (Light Blue) and #D8BFD8 (Thistle) introduce the delicate, shimmering qualities of distant lights. This palette is ideal for designers and developers seeking to create calm, sophisticated, and slightly mysterious digital environments that evoke peace and quiet contemplation.

Best used for

  • Meditation or mindfulness app interfaces
  • Luxury hotel or resort branding
  • Winter landscape photography portfolios
  • Educational content on astronomy or nature
  • Sophisticated personal blogs or websites
  • Relaxing background music visualizers

Suggested color roles

primary

Use #000033 (Midnight Blue) as a dominant background or for weighty elements, establishing a deep, serene atmosphere.

secondary

Apply #004080 (Dark Cerulean) or #36454F (Charcoal) for navigation, content blocks, or subheadings, providing depth and structure.

accent

Deploy #ADD8E6 (Light Blue) or #D8BFD8 (Thistle) for subtle highlights, interactive elements, or ethereal glows, mimicking aurora light.

background

The deep #000033 creates an excellent dark canvas, allowing lighter elements to softly glow. #ADD8E6 can be a subtle, light background.

text

For dark backgrounds, #ADD8E6 provides excellent contrast. For lighter backgrounds, a deep charcoal or #000033 ensures readability.

Accessibility notes

  • Ensure high contrast when pairing #ADD8E6 or #D8BFD8 with the darker blues for body text to meet accessibility standards.
  • Avoid using #36454F for small text on #004080 backgrounds due to potential low contrast.
  • White or near-white text on #000033 and #004080 will offer the best readability.
  • The muted nature of #D8BFD8 might require larger text sizes or bolder weights when used for important information.

Recommended combinations

Serene Night

Ideal for peaceful hero sections, combining a deep midnight blue with soft light blue and thistle accents for an ethereal feel.

#000033 · #ADD8E6 · #D8BFD8

Muted Horizon

Excellent for content blocks or subtle data displays, blending dark cerulean and charcoal with a gentle light blue highlight.

#004080 · #36454F · #ADD8E6

Quiet Glow

Perfect for elegant UI elements or icons, using thistle as a soft primary, grounded by deep blues for sophistication.

#D8BFD8 · #000033 · #004080

CSS variables

:root {
  --northern-lights-serene-1: #000033;
  --northern-lights-serene-2: #004080;
  --northern-lights-serene-3: #36454F;
  --northern-lights-serene-4: #ADD8E6;
  --northern-lights-serene-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-serene": {
        1: "#000033",
        2: "#004080",
        3: "#36454F",
        4: "#ADD8E6",
        5: "#D8BFD8",
      }
    }
  }
}

Related searches

calm aurora color palettemuted blue purple colorsserene night sky palettesophisticated cool toneslight blue thistle combo

Palette colors

Hex values

Color 1#000033
·
Color 2#004080
·
Color 3#36454F
·
Color 4#ADD8E6
·
Color 5#D8BFD8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2:1Fail
13.1:1AAA
11.8:1AAA
2
2:1Fail
1:1Fail
6.7:1AA
6:1AA
3
2:1Fail
1:1Fail
6.5:1AA
5.8:1AA
4
13.1:1AAA
6.7:1AA
6.5:1AA
1.1:1Fail
5
11.8:1AAA
6:1AA
5.8:1AA
1.1:1Fail

Similar palettes

More like Northern Lights Serene

View all cool
Aegean Isle Horizon
Arctic Glacier Melt
Calm Lake Reflections
Frosted Window Pane
Frozen Tundra Mist
Glacial Lagoon