Palette

Arctic Serene Ice

A crisp, tranquil palette reflecting the cool, clean serenity of an arctic ice formation under a pale sky.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Serene Ice 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 Serene Ice.

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

Data visualization

#A2D2FF#E0FFFF#B3CDE0#F0F8FF#6497B1

Palette guide

How to use Arctic Serene Ice

Overview

The Arctic Serene Ice palette offers a crisp, tranquil collection of blues and near-whites, reflecting the cool, clean serenity of arctic ice formations under a pale sky. It features the soft, almost sky blue #A2D2FF, a brilliant icy white #E0FFFF, and a muted steel blue #B3CDE0. The palette is brightened by the pure #F0F8FF and grounded by the subtle, deeper #6497B1. This selection is perfect for designers and developers aiming to create interfaces or branding that exude purity, spaciousness, and a gentle, calming atmosphere. Its light, airy quality makes it ideal for minimalist designs where subtlety and freshness are key.

Best used for

Spa and wellness branding
Clean, minimalist web design
Cloud-based software interfaces
Luxury home decor marketing
Newborn and baby product design
Winter-themed digital illustrations

Suggested color roles

primary

The grounding #6497B1 works well for primary navigation, important headings, or subtle calls-to-action, providing necessary depth.

secondary

Use the gentle #A2D2FF for secondary information, subheadings, or background elements that need a touch of color.

accent

The vibrant #E0FFFF or #F0F8FF can serve as clean accents for interactive elements or highlights, offering brilliant contrast.

background

The pristine #F0F8FF provides an ideal, airy background, enhancing the sense of calm and spaciousness.

text

For optimal readability, use a dark grey or black for primary text. #6497B1 can be used for secondary text against very light backgrounds.

Accessibility notes

Ensure significant contrast for any text or interactive elements, especially when using the lighter shades like #E0FFFF and #F0F8FF.
Avoid using #A2D2FF and #B3CDE0 as text colors against each other due to potential low contrast.
Darker colors like #6497B1 should be used for critical text against light backgrounds to meet WCAG AA standards.
Provide clear visual cues for interactive states beyond color alone, given the subtle differences between light blues.

Recommended combinations

Ice Flow

Excellent for soft, layered backgrounds or subtle UI elements that require a gentle, almost transparent feel.

#F0F8FF · #E0FFFF · #A2D2FF

Glacial Depths

Ideal for a clean layout, using the deep blue for important text or buttons and the light for content.

#6497B1 · #B3CDE0 · #F0F8FF

Serene Sky

Effective for creating a fresh, inviting header or a brand mark that conveys calm and clarity.

#A2D2FF · #E0FFFF · #6497B1

CSS variables

:root {
  --arctic-serene-ice-1: #A2D2FF;
  --arctic-serene-ice-2: #E0FFFF;
  --arctic-serene-ice-3: #B3CDE0;
  --arctic-serene-ice-4: #F0F8FF;
  --arctic-serene-ice-5: #6497B1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-serene-ice": {
        1: "#A2D2FF",
        2: "#E0FFFF",
        3: "#B3CDE0",
        4: "#F0F8FF",
        5: "#6497B1",
      }
    }
  }
}

Hex values

Color 1#A2D2FF

Color 2#E0FFFF

Color 3#B3CDE0

Color 4#F0F8FF

Color 5#6497B1

Accessibility

Contrast checker

1.5:1Fail

1:1Fail

1.5:1Fail

2:1Fail

1.5:1Fail

1.6:1Fail

1:1Fail

3:1AA18

1:1Fail

1.6:1Fail

1.5:1Fail

1.9:1Fail

1.5:1Fail

1:1Fail

1.5:1Fail

3:1Fail

2:1Fail

3:1AA18

1.9:1Fail

3:1Fail

Similar palettes

More like Arctic Serene Ice

Arctic Serene Ice

See it in context.

Ready when you are.

Built with Arctic Serene Ice.

How to use Arctic Serene Ice

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ice Flow

Glacial Depths

Serene Sky

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arctic Serene Ice