Palette

Aurora Ice Blossom

Icy blues and deep indigos capture the luminous glow of the aurora dancing over a frozen landscape.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aurora Ice Blossom 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 Aurora Ice Blossom.

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

Data visualization

#0A1D36#2B475D#506F85#8CCCF2#CCF0FF

Palette guide

How to use Aurora Ice Blossom

Overview

The "Aurora Ice Blossom" palette captures the luminous glow of the aurora dancing over a frozen landscape with icy blues and deep indigos, creating a minimal and cool feel. It features a profound midnight blue #0A1D36, a rich slate blue #2B475D, a muted steel blue #506F85, a vibrant sky blue #8CCCF2, and a luminous light blue #CCF0FF. This cool palette is ideal for designers looking to infuse sophistication, tranquility, and a touch of arctic wonder into their projects. The harmonious blend of blues, progressing from dark to light, creates a refreshing and modern aesthetic, perfect for web interfaces, branding, or digital art that aims to be both captivating and serene. It offers a truly elegant and ethereal aesthetic.

Best used for

High-end tech or software interfaces
Luxury travel agencies (arctic destinations)
Minimalist design projects
Winter-themed branding or events
Science and astronomy educational platforms
Elegant personal portfolios

Suggested color roles

primary

#506F85 - A balanced muted steel blue, ideal for main interactive elements, key calls-to-action, or prominent sections that convey clarity and elegance.

secondary

#2B475D - A rich slate blue, excellent for supporting content, navigation backgrounds, or subheadings, adding depth and sophistication.

accent

#CCF0FF - A luminous light blue, perfect for highlights, hover states, or small decorative elements that need to pop with an ethereal glow.

background

#0A1D36 - A profound midnight blue, providing a sophisticated and grounding foundation against which the lighter blues truly shine.

text

#CCF0FF - A luminous light blue that offers excellent readability on #0A1D36 or #2B475D, or use a crisp white for general body text on darkest backgrounds.

Accessibility notes

Ensure #CCF0FF or #8CCCF2 has sufficient contrast when used for text on #0A1D36 or #2B475D backgrounds.
#506F85 can be used for headings on #0A1D36, but always verify contrast for smaller text.
Avoid using #2B475D text directly on #506F85, as the contrast might be insufficient.
For optimal readability, use a very light color (like #CCF0FF or white) for body text on the darkest palette shades.

Recommended combinations

Deep Freeze

Robust website footers, elegant dashboards, or professional presentations.

#0A1D36 · #2B475D · #506F85

Ice Glow

Vibrant hero sections, engaging infographics, or serene app interfaces.

#506F85 · #8CCCF2 · #CCF0FF

Arctic Shimmer

Dynamic gradient backgrounds, celestial-themed graphics, or impactful presentations.

#0A1D36 · #8CCCF2 · #CCF0FF

CSS variables

:root {
  --aurora-ice-blossom-1: #0A1D36;
  --aurora-ice-blossom-2: #2B475D;
  --aurora-ice-blossom-3: #506F85;
  --aurora-ice-blossom-4: #8CCCF2;
  --aurora-ice-blossom-5: #CCF0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aurora-ice-blossom": {
        1: "#0A1D36",
        2: "#2B475D",
        3: "#506F85",
        4: "#8CCCF2",
        5: "#CCF0FF",
      }
    }
  }
}

Hex values

Color 1#0A1D36

Color 2#2B475D

Color 3#506F85

Color 4#8CCCF2

Color 5#CCF0FF

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

9.7:1AAA

14.1:1AAA

1.7:1Fail

1.8:1Fail

5.6:1AA

8.1:1AAA

3.2:1AA18

1.8:1Fail

3:1AA18

4.4:1AA18

9.7:1AAA

5.6:1AA

3:1AA18

1.5:1Fail

14.1:1AAA

8.1:1AAA

4.4:1AA18

1.5:1Fail

Similar palettes

More like Aurora Ice Blossom