Back to palettes

Palette

Polar Sky Lumina

A magical blend of deep blues and luminous greens, capturing the breathtaking dance of the northern lights.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Polar Sky Lumina 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 Polar Sky Lumina.

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

Data visualization

#0A1D3B#1C3C6E#3A6FA6#6FB2CE#A9D9EE

Palette guide

How to use Polar Sky Lumina

Overview

The Polar Sky Lumina palette evokes the mesmerizing spectacle of the northern lights, offering a vibrant spectrum of blues and a touch of luminous green. This collection, anchored by a deep navy "#0A1D3B" and transitioning through rich "#1C3C6E" and balanced "#3A6FA6", culminates in bright, airy tones like "#6FB2CE" and the almost ethereal "#A9D9EE". It’s ideal for projects aiming to convey wonder, depth, and a sense of natural, yet energetic, beauty. Designers can leverage its cool, refreshing quality for digital interfaces, branding, or artistic endeavors that require a dynamic yet harmonious blue-dominant scheme. Developers will find these hex codes provide a consistent visual language for creating immersive user experiences.

Best used for

  • Nature-inspired tech branding
  • Winter sports apparel design
  • Digital interfaces for travel or astronomy apps
  • Environmental or conservation organization websites
  • Artistic installations or event promotions
  • Packaging for premium beverages or skincare

Suggested color roles

primary

A deep, grounding navy "#0A1D3B", perfect for main headers, navigation bars, or foundational brand elements that need to convey authority and depth.

secondary

A rich, mid-tone blue "#1C3C6E" that complements the primary, suitable for subheadings, active states, or prominent graphical elements.

accent

A bright, sky-blue hue "#6FB2CE" that provides a striking contrast, ideal for call-to-action buttons, key data points, or interactive highlights.

background

A very light, airy blue "#A9D9EE" that serves as a clean, expansive backdrop, allowing other elements to stand out without feeling stark.

text

Use the primary deep navy "#0A1D3B" for main body text on light backgrounds like #A9D9EE to ensure excellent readability and maintain palette cohesion. For lighter backgrounds, a near-black or charcoal is also suitable.

Accessibility notes

  • Ensure sufficient contrast between "#0A1D3B" text and "#A9D9EE" background for AA/AAA compliance.
  • Avoid placing light blues like "#6FB2CE" directly on "#A9D9EE" for text or small elements due to low contrast.
  • Use a color contrast checker for all text and interactive elements, especially with the lighter shades.
  • Pair darker tones (e.g., "#0A1D3B", "#1C3C6E") with lighter ones (e.g., "#A9D9EE", "#6FB2CE") for clear visual hierarchy.

Recommended combinations

Deep Contrast

Excellent for high-contrast UI elements, dark text on light backgrounds, or striking visual anchors in a layout.

#0A1D3B · #A9D9EE · #6FB2CE

Aurora Flow

Creates a smooth, gradient-like transition, suitable for backgrounds, infographics, or visual storytelling that needs fluidity.

#1C3C6E · #3A6FA6 · #6FB2CE

Luminous Horizon

A balanced trio for branding, presenting a sophisticated and serene mood with depth, mid-tone, and lightness.

#0A1D3B · #3A6FA6 · #A9D9EE

CSS variables

:root {
  --polar-sky-lumina-1: #0A1D3B;
  --polar-sky-lumina-2: #1C3C6E;
  --polar-sky-lumina-3: #3A6FA6;
  --polar-sky-lumina-4: #6FB2CE;
  --polar-sky-lumina-5: #A9D9EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "polar-sky-lumina": {
        1: "#0A1D3B",
        2: "#1C3C6E",
        3: "#3A6FA6",
        4: "#6FB2CE",
        5: "#A9D9EE",
      }
    }
  }
}

Related searches

northern lights color schemedeep blue vibrant palettearctic blue design colorsluminous sky brandingcool blue ui palette

Palette colors

Hex values

Color 1#0A1D3B
·
Color 2#1C3C6E
·
Color 3#3A6FA6
·
Color 4#6FB2CE
·
Color 5#A9D9EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.2:1AA18
7.1:1AAA
11.1:1AAA
2
1.5:1Fail
2.1:1Fail
4.7:1AA
7.2:1AAA
3
3.2:1AA18
2.1:1Fail
2.2:1Fail
3.5:1AA18
4
7.1:1AAA
4.7:1AA
2.2:1Fail
1.5:1Fail
5
11.1:1AAA
7.2:1AAA
3.5:1AA18
1.5:1Fail

Similar palettes

More like Polar Sky Lumina

View all vibrant
Aurora Borealis Dance
Northern Lights Shimmer
Aurora Borealis
Aurora Borealis Hues
Aurora Sky Shimmer
Aurora Veil Lights