Palette

Northern Glimmer

A mesmerizing gradient from deep navy to icy white, capturing the serene and mystical glow of the polar sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0C2340#2D4C6E#5A7DA3#A7CEDC#E3F3F5

Palette guide

How to use Northern Glimmer

Overview

The Northern Glimmer palette presents a mesmerizing gradient from deep navy to icy white, perfectly capturing the serene and mystical glow of the polar sky. This sophisticated collection is ideal for designers and developers seeking to evoke a sense of ethereal beauty, depth, and modern elegance. It transitions seamlessly from the profound #0C2340 and #2D4C6E through the rich #5A7DA3 to the bright, almost-white #E3F3F5. This palette is exceptionally versatile for creating immersive digital experiences, high-end branding, and compelling visual narratives that require a cool, clean, and captivating aesthetic. It balances darkness and light with grace, perfect for showcasing content with a touch of grandeur.

Best used for

Luxury brand websites and digital campaigns
Environmental and conservation advocacy groups
Winter tourism and adventure marketing
High-tech product launches and interfaces
Scientific research presentations and data visualization
Ethereal digital art and creative portfolios

Suggested color roles

primary

Use #2D4C6E as a rich, deep blue primary for main content sections or key UI elements, providing a sophisticated foundation.

secondary

Employ #5A7DA3 for supporting visual elements, subheadings, or secondary calls to action, offering a softer, ethereal blue.

accent

Reserve #0C2340 for strong accents, critical information, or impactful text, leveraging its profound depth for maximum contrast.

background

Utilize #E3F3F5 as the primary background color, offering a light, airy, and expansive canvas that beautifully highlights the darker blues.

text

For maximum legibility, use #0C2340 for all body text and headings on light backgrounds. For lighter text on dark elements, a crisp white is ideal.

Accessibility notes

Ensure #0C2340 on #E3F3F5 provides excellent contrast for all text, meeting WCAG AAA standards.
Verify that #2D4C6E on #E3F3F5 maintains strong readability for body text, typically meeting WCAG AA.
Be cautious when using #A7CEDC on #E3F3F5 for small text or icons, as contrast may be insufficient; reserve for larger titles or accents.
Interactive elements should have clearly defined hover and focus states, perhaps using #0C2340 for strong visual feedback.

Recommended combinations

Deep Night

A powerful combination for a header (#0C2340) on a bright background (#E3F3F5), with #5A7DA3 for supporting text or graphical elements.

#0C2340 · #E3F3F5 · #5A7DA3

Polar Glow

Ideal for content blocks where #2D4C6E provides structure, #A7CEDC offers a subtle visual break, and #E3F3F5 is the clean base.

#2D4C6E · #A7CEDC · #E3F3F5

Mystical Ascent

Combines a versatile mid-blue (#5A7DA3) with the deepest navy (#0C2340) for emphasis, and a lighter blue (#A7CEDC) for context.

#5A7DA3 · #0C2340 · #A7CEDC

CSS variables

:root {
  --northern-glimmer-1: #0C2340;
  --northern-glimmer-2: #2D4C6E;
  --northern-glimmer-3: #5A7DA3;
  --northern-glimmer-4: #A7CEDC;
  --northern-glimmer-5: #E3F3F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-glimmer": {
        1: "#0C2340",
        2: "#2D4C6E",
        3: "#5A7DA3",
        4: "#A7CEDC",
        5: "#E3F3F5",
      }
    }
  }
}

Hex values

Color 1#0C2340

Color 2#2D4C6E

Color 3#5A7DA3

Color 4#A7CEDC

Color 5#E3F3F5

Accessibility

Contrast checker

1.8:1Fail

3.7:1AA18

9.4:1AAA

13.8:1AAA

1.8:1Fail

2.1:1Fail

5.3:1AA

7.8:1AAA

3.7:1AA18

2.1:1Fail

2.6:1Fail

3.8:1AA18

9.4:1AAA

5.3:1AA

2.6:1Fail

1.5:1Fail

13.8:1AAA

7.8:1AAA

3.8:1AA18

1.5:1Fail

Similar palettes

More like Northern Glimmer

View all cool

Northern Lights Dance

Arctic Aurora Glow

Celestial Aurora Dream

Celestial Aurora Whisper

Celestial Veil Haze

Frosted Winter Meadow