Palette

Mystic Aurora Gleam

Evokes the ethereal dance of northern lights across a deep, star-studded arctic sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Aurora Gleam 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 Mystic Aurora Gleam.

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

Data visualization

#0B2B40#2D5A7A#8EC4E6#C4F4EC#5F9BA9

Palette guide

How to use Mystic Aurora Gleam

Overview

The Mystic Aurora Gleam palette captures the breathtaking, ethereal dance of the Northern Lights across a deep arctic sky. This collection features a profound dark navy, #0B2B40, a rich sapphire blue, #2D5A7A, and a vibrant sky blue, #8EC4E6. A luminous pale cyan, #C4F4EC, evokes the brightest gleam of the aurora, while a muted teal-blue, #5F9BA9, adds a touch of serene depth. This palette is perfect for designs aiming for a magical, tranquil, and sophisticated aesthetic, ideal for conveying wonder, calm, and a connection to nature.

Best used for

Space and astronomy websites
Eco-friendly travel agencies
Winter sports apparel branding
Meditation and relaxation apps
Sci-fi game UI design
Nature photography portfolios

Suggested color roles

primary

Use #0B2B40 (Deep Navy) for large background areas, headers, or footers to establish a strong, dark, and mysterious foundation.

secondary

Apply #2D5A7A (Sapphire Blue) for subheadings, navigation, or card backgrounds, providing a rich, supportive depth.

accent

Utilize #8EC4E6 (Sky Blue) for interactive elements, icons, or glowing highlights to simulate the vibrant gleam of the aurora.

background

Employ #C4F4EC (Pale Cyan) as a very light, airy base for content, best used sparingly or for light-on-dark text sections.

text

White or a very light gray is essential for text on #0B2B40, #2D5A7A, and #5F9BA9. For text on #C4F4EC, a dark navy or black provides excellent contrast.

Accessibility notes

Ensure very high contrast (white text) when using #0B2B40, #2D5A7A, or #5F9BA9 as backgrounds for text.
#C4F4EC is very light; use it carefully for text or only against very dark backgrounds to meet contrast requirements.
#8EC4E6 can be used for text on darker backgrounds, but always verify readability.
Always check text and interactive element contrast ratios with accessibility checkers for optimal compliance.

Recommended combinations

Arctic Night

Perfect for a website hero section, with #0B2B40 as the deep background, #C4F4EC for main text, and #8EC4E6 for a prominent call-to-action.

#0B2B40 · #C4F4EC · #8EC4E6

Aurora Borealis

Great for creating layered visual effects or data representations, with #2D5A7A as the base, #5F9BA9 for secondary elements, and #8EC4E6 for highlights.

#2D5A7A · #5F9BA9 · #8EC4E6

Frozen Sky

Ideal for minimalist UI elements, using #C4F4EC for card backgrounds, #0B2B40 for titles, and #5F9BA9 for subtle icons.

#C4F4EC · #0B2B40 · #5F9BA9

CSS variables

:root {
  --mystic-aurora-gleam-1: #0B2B40;
  --mystic-aurora-gleam-2: #2D5A7A;
  --mystic-aurora-gleam-3: #8EC4E6;
  --mystic-aurora-gleam-4: #C4F4EC;
  --mystic-aurora-gleam-5: #5F9BA9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-aurora-gleam": {
        1: "#0B2B40",
        2: "#2D5A7A",
        3: "#8EC4E6",
        4: "#C4F4EC",
        5: "#5F9BA9",
      }
    }
  }
}

Hex values

Color 1#0B2B40

Color 2#2D5A7A

Color 3#8EC4E6

Color 4#C4F4EC

Color 5#5F9BA9

Accessibility

Contrast checker

2:1Fail

7.8:1AAA

12.2:1AAA

4.7:1AA

2:1Fail

3.9:1AA18

6.1:1AA

2.4:1Fail

7.8:1AAA

3.9:1AA18

1.6:1Fail

1.7:1Fail

12.2:1AAA

6.1:1AA

1.6:1Fail

2.6:1Fail

4.7:1AA

2.4:1Fail

1.7:1Fail

2.6:1Fail

Similar palettes

More like Mystic Aurora Gleam

View all cool

Clear Night Chill

Starry Night Horizon

Alpine Lake Reflection

Alpine Mist

Aqua Stillness Mood

Arctic Lake Glass