Back to palettes

Palette

Arctic Aurora Glow

Shimmering blues and whites that capture the cool, magical dance of the aurora over icy landscapes.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Aurora Glow 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 Arctic Aurora Glow.

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

Data visualization

#0A1B2D#2D4A5E#5E7A8A#9BBACB#DAEBF2

Palette guide

How to use Arctic Aurora Glow

Overview

The "Arctic Aurora Glow" palette captures the cool, magical dance of the aurora over icy landscapes with shimmering blues and whites. This serene collection features a gradient from the deep Midnight Blue #0A1B2D and the profound Dark Slate Grey #2D4A5E to the balanced Steel Blue #5E7A8A. Lighter, ethereal tones like Light Blue Grey #9BBACB and the very pale Alice Blue #DAEBF2 complete this harmonious set, evoking a sense of calm and wonder. Developers can utilize these shades for sophisticated, immersive interfaces that convey tranquility and a touch of mystique. Designers will find this palette ideal for projects related to winter themes, luxury travel, wellness, or any brand seeking a serene, elegant, and visually captivating aesthetic.

Best used for

  • Winter tourism marketing
  • Luxury spa branding
  • Cold weather apparel
  • High-tech interfaces
  • Celestial photography portfolios
  • Mindfulness and meditation apps

Suggested color roles

primary

A very deep midnight blue #0A1B2D, providing a strong, sophisticated foundation for backgrounds, headers, or primary branding.

secondary

A rich dark slate grey #2D4A5E that adds depth and elegance, suitable for large content blocks, sidebars, or secondary navigation.

accent

A balanced steel blue #5E7A8A that offers a subtle yet distinct accent, perfect for calls to action, important highlights, or interactive elements.

background

A very light alice blue #DAEBF2, offering a clean, expansive backdrop that enhances readability and maintains the icy, serene feel.

text

Use #DAEBF2 for body text and headings on dark backgrounds like #0A1B2D or #2D4A5E, or pure white for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast for light text (e.g., #DAEBF2 or white) against dark backgrounds like #0A1B2D and #2D4A5E.
  • The lighter shades like #9BBACB and #DAEBF2 are generally not suitable for small body text; use a dark neutral on these.
  • Use a very dark neutral (e.g., black or charcoal) for all body text on the lightest backgrounds to ensure wcag compliance.
  • Interactive elements should have clear visual feedback, potentially using the slightly brighter #5E7A8A for hover states.

Recommended combinations

Arctic Night

For establishing a deep, calming base in websites or apps, with midnight blue as primary, alice blue as background, and dark slate grey for panels.

#0A1B2D · #DAEBF2 · #2D4A5E

Aurora Shimmer

Ideal for gradients or visual effects that simulate the aurora's gentle glow, adding an ethereal and magical quality.

#5E7A8A · #9BBACB · #DAEBF2

Icy Focus

Effective for highlighting important information or calls to action, using dark slate grey for buttons, steel blue for text, and midnight blue for context.

#2D4A5E · #5E7A8A · #0A1B2D

CSS variables

:root {
  --arctic-aurora-glow-2-1: #0A1B2D;
  --arctic-aurora-glow-2-2: #2D4A5E;
  --arctic-aurora-glow-2-3: #5E7A8A;
  --arctic-aurora-glow-2-4: #9BBACB;
  --arctic-aurora-glow-2-5: #DAEBF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-aurora-glow-2": {
        1: "#0A1B2D",
        2: "#2D4A5E",
        3: "#5E7A8A",
        4: "#9BBACB",
        5: "#DAEBF2",
      }
    }
  }
}

Related searches

arctic blue paletteaurora borealis colorsicy winter aestheticcold blue grey schemeserene night sky design

Palette colors

Hex values

Color 1#0A1B2D
·
Color 2#2D4A5E
·
Color 3#5E7A8A
·
Color 4#9BBACB
·
Color 5#DAEBF2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.8:1AA18
8.5:1AAA
14.2:1AAA
2
1.9:1Fail
2.1:1Fail
4.6:1AA
7.6:1AAA
3
3.8:1AA18
2.1:1Fail
2.2:1Fail
3.7:1AA18
4
8.5:1AAA
4.6:1AA
2.2:1Fail
1.7:1Fail
5
14.2:1AAA
7.6:1AAA
3.7:1AA18
1.7:1Fail

Similar palettes

More like Arctic Aurora Glow

View all cool