Palette

Northern Lights Veil

Deep, ethereal blues and greens evoke the awe-inspiring dance of the aurora borealis across the night sky.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F2D3D#2B5A70#4C8DA3#7FD4E8#051A24

Palette guide

How to use Northern Lights Veil

Overview

The Northern Lights Veil palette evokes the awe-inspiring dance of the aurora borealis across the night sky with its deep, ethereal blues and greens. This mystical collection begins with the profound #0F2D3D (Dark Teal) and transitions through #2B5A70 (Cadet Blue) and #4C8DA3 (Steel Blue), culminating in the luminous #7FD4E8 (Light Sky Blue). The ultra-dark #051A24 (Deep Green-Blue) provides a stark, grounding contrast, perfect for designs that require depth and a cosmic feel. Designers and developers can use this palette to create immersive, serene, and sophisticated digital experiences that capture the wonder of the night sky.

Best used for

Astronomy or science education platforms
Nature and wildlife documentary branding
Dark mode interfaces for productivity apps
Luxury travel agency websites (arctic tours)
Ambient music album art
Ethereal digital art and backgrounds

Suggested color roles

primary

Use #051A24 (Deep Green-Blue) as a dominant background or for weighty foundational elements, establishing a profound, dark atmosphere.

secondary

Apply #0F2D3D (Dark Teal) or #2B5A70 (Cadet Blue) for content blocks, navigation, or subheadings, providing layered depth.

accent

Deploy #4C8DA3 (Steel Blue) or #7FD4E8 (Light Sky Blue) for interactive elements, calls-to-action, or ethereal highlights that mimic aurora light.

background

The deep #051A24 provides an excellent, immersive canvas for lighter elements to glow, creating a true night sky effect.

text

For dark backgrounds, #7FD4E8 offers excellent readability. For lighter elements, a deep charcoal or #051A24 ensures strong contrast.

Accessibility notes

Ensure high contrast when pairing #7FD4E8 (Light Sky Blue) with the darker shades for body text to meet WCAG AA standards.
Avoid using #2B5A70 for small text on #0F2D3D backgrounds due to potentially insufficient contrast.
White or very light grey text on #051A24 and #0F2D3D will maximize readability.
The mid-tone #4C8DA3 might require larger text sizes or bolder weights when used for important information on similar backgrounds.

Recommended combinations

Cosmic Depths

Ideal for dark mode hero sections, combining a deep green-blue base with a cadet blue and a luminous light sky blue highlight.

#051A24 · #2B5A70 · #7FD4E8

Ethereal Flow

Excellent for gradients or layered graphics, mimicking the flowing nature of the aurora across a dark teal background.

#0F2D3D · #4C8DA3 · #7FD4E8

Mystic Glimmer

Perfect for UI elements or icons, using cadet blue as a primary, grounded by the deep green-blue, with a steel blue accent.

#2B5A70 · #051A24 · #4C8DA3

CSS variables

:root {
  --northern-lights-veil-1: #0F2D3D;
  --northern-lights-veil-2: #2B5A70;
  --northern-lights-veil-3: #4C8DA3;
  --northern-lights-veil-4: #7FD4E8;
  --northern-lights-veil-5: #051A24;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-veil": {
        1: "#0F2D3D",
        2: "#2B5A70",
        3: "#4C8DA3",
        4: "#7FD4E8",
        5: "#051A24",
      }
    }
  }
}

Hex values

Color 1#0F2D3D

Color 2#2B5A70

Color 3#4C8DA3

Color 4#7FD4E8

Color 5#051A24

Accessibility

Contrast checker

1.9:1Fail

3.9:1AA18

8.5:1AAA

1.2:1Fail

1.9:1Fail

2:1Fail

4.5:1AA18

2.4:1Fail

3.9:1AA18

2:1Fail

2.2:1Fail

4.8:1AA

8.5:1AAA

4.5:1AA18

2.2:1Fail

10.6:1AAA

1.2:1Fail

2.4:1Fail

4.8:1AA

10.6:1AAA

Similar palettes

More like Northern Lights Veil

Celestial Deep Nebula

Celestial Orb Glow

Cobalt Abyss Depths