Palette

Glacial Lake Tranquility

Crisp blues and serene whites mirroring the untouched calm and reflective surface of a glacial lake.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Lake Tranquility 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 Glacial Lake Tranquility.

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

Data visualization

#ADD8E6#87CEEB#4682B4#B0C4DE#F0FFFF

Palette guide

How to use Glacial Lake Tranquility

Overview

The Glacial Lake Tranquility palette offers a crisp and serene collection of cool blues and near-white tones, perfect for projects requiring a clean, ethereal aesthetic. Featuring the vibrant #4682B4 alongside the bright #87CEEB, and softened by #ADD8E6 and #B0C4DE, this palette culminates in the almost pure white #F0FFFF. It’s excellent for evoking a sense of calm, purity, and expansiveness. Designers and developers will find its clean lines and cool hues ideal for creating interfaces that feel fresh, modern, and inviting, much like the untouched surface of a tranquil glacial lake.

Best used for

Medical and healthcare applications
Luxury spa and wellness marketing
Clean, minimalist website designs
Winter sports and outdoor adventure brands
Cloud computing service interfaces
Children's educational platforms

Suggested color roles

primary

Designate #4682B4 as the robust primary color for key information, headings, or interactive elements, conveying stability.

secondary

Use #87CEEB for supporting visual elements, illustrations, or secondary calls to action, adding a touch of brightness.

accent

Apply #ADD8E6 for subtle highlights, background textures, or decorative elements that need a gentle touch of color.

background

The pristine #F0FFFF serves as an ideal clean canvas, providing ample space and enhancing content readability.

text

For body text, use #4682B4 on #F0FFFF to ensure high contrast and readability, or a dark charcoal for general content.

Accessibility notes

Ensure #4682B4 text on #F0FFFF background meets WCAG AAA contrast standards for optimal readability.
Avoid using #B0C4DE or #ADD8E6 for small text on #F0FFFF, as contrast levels will be insufficient.
Utilize #4682B4 for all critical interactive elements to provide clear visual cues for users.
When pairing #87CEEB with #4682B4, ensure the larger area of #87CEEB provides enough contrast for text or icons.

Recommended combinations

Clean Header

A strong header (#4682B4) on a pristine background (#F0FFFF) with a vibrant accent (#87CEEB) for visual interest.

#4682B4 · #F0FFFF · #87CEEB

Soft UI

A gentle user interface featuring a muted blue-gray (#B0C4DE) on a pure white background (#F0FFFF), with a soft blue highlight (#ADD8E6).

#B0C4DE · #F0FFFF · #ADD8E6

Deep Contrast

Combine the deep blue (#4682B4) with pure white (#F0FFFF) for stark contrast, softened by #B0C4DE for secondary information.

#4682B4 · #F0FFFF · #B0C4DE

CSS variables

:root {
  --glacial-lake-tranquility-1: #ADD8E6;
  --glacial-lake-tranquility-2: #87CEEB;
  --glacial-lake-tranquility-3: #4682B4;
  --glacial-lake-tranquility-4: #B0C4DE;
  --glacial-lake-tranquility-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-lake-tranquility": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#B0C4DE",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#4682B4

Color 4#B0C4DE

Color 5#F0FFFF

Accessibility

Contrast checker

1.1:1Fail

2.7:1Fail

1.2:1Fail

1.5:1Fail

1.1:1Fail

2.4:1Fail

1:1Fail

1.7:1Fail

2.7:1Fail

2.4:1Fail

2.3:1Fail

4:1AA18

1.2:1Fail

1:1Fail

2.3:1Fail

1.7:1Fail

1.5:1Fail

1.7:1Fail

4:1AA18

1.7:1Fail

Similar palettes

More like Glacial Lake Tranquility

Glacial Lake Tranquility

See it in context.

Ready when you are.

Built with Glacial Lake Tranquility.

How to use Glacial Lake Tranquility

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clean Header

Soft UI

Deep Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Glacial Lake Tranquility