Palette

Frozen Expanse

Reflecting the serene beauty of a vast, frozen landscape with ethereal blues and soft, shimmering whites.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frozen Expanse 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 Frozen Expanse.

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

Data visualization

#ADD8E6#C0E6F0#E0F5F8#90BEDF#6CA5CB

Palette guide

How to use Frozen Expanse

Overview

The 'Frozen Expanse' palette reflects the serene beauty of a vast, frozen landscape, featuring ethereal blues and soft, shimmering whites. This collection, anchored by the bright #E0F5F8 and deeper #6CA5CB, offers a range of cool, muted tones perfect for conveying tranquility and spaciousness. Other key colors include #ADD8E6, #C0E6F0, and #90BEDF, which blend seamlessly to create a harmonious and calming visual experience. Designers seeking a gentle, uncluttered aesthetic will find this palette invaluable for creating inviting digital spaces or sophisticated branding. It's particularly effective for designs aiming for a sense of peace and understated elegance.

Best used for

Calm and minimalist website designs
Branding for wellness, spa, or luxury brands
Winter-themed event invitations or promotions
Educational platforms with a clean, inviting look
Soft, ethereal digital illustrations
Corporate reports and presentations needing a serene backdrop

Suggested color roles

primary

Use #6CA5CB for main headings or important calls-to-action, providing a soft but clear focal point.

secondary

Employ #90BEDF for subheadings, secondary navigation, or larger graphic elements, adding gentle depth.

accent

Apply #ADD8E6 as a subtle accent for hover states, small icons, or to break up larger blocks of content.

background

Utilize #E0F5F8 as the primary background color, offering a pristine, expansive canvas.

text

A dark charcoal or black text color is essential on the lighter backgrounds to ensure optimal readability.

Accessibility notes

Ensure sufficient contrast for text on very light backgrounds like #E0F5F8; use a dark, contrasting text color.
The subtle differences between #ADD8E6, #C0E6F0, and #E0F5F8 may require careful placement for distinct UI elements.
Avoid using light text on light backgrounds to prevent readability issues for users with visual impairments.
Test all color pairings against WCAG AA guidelines, especially for interactive elements and form fields.

Recommended combinations

Calm Horizon

Creates a gentle, receding background effect, ideal for expansive hero sections or informational pages.

#E0F5F8 · #ADD8E6 · #6CA5CB

Soft Depth

Perfect for layered UI elements or subtle gradients, adding dimension without harsh contrasts.

#C0E6F0 · #90BEDF · #6CA5CB

Pristine Contrast

Provides a clean and readable combination, with the darkest blue offering good contrast against the lightest.

#E0F5F8 · #90BEDF · #6CA5CB

CSS variables

:root {
  --frozen-expanse-1: #ADD8E6;
  --frozen-expanse-2: #C0E6F0;
  --frozen-expanse-3: #E0F5F8;
  --frozen-expanse-4: #90BEDF;
  --frozen-expanse-5: #6CA5CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frozen-expanse": {
        1: "#ADD8E6",
        2: "#C0E6F0",
        3: "#E0F5F8",
        4: "#90BEDF",
        5: "#6CA5CB",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#C0E6F0

Color 3#E0F5F8

Color 4#90BEDF

Color 5#6CA5CB

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.7:1Fail

1.2:1Fail

1.5:1Fail

2:1Fail

1.4:1Fail

1.2:1Fail

1.8:1Fail

2.4:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

1.3:1Fail

1.7:1Fail

2:1Fail

2.4:1Fail

1.3:1Fail

Similar palettes

More like Frozen Expanse

Frozen Expanse

See it in context.

Ready when you are.

Built with Frozen Expanse.

How to use Frozen Expanse

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Calm Horizon

Soft Depth

Pristine Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Frozen Expanse