Palette

Glacial Peak Haze

Crisp blues and whites that mirror the breathtaking views of misty, snow-capped glacial mountain peaks.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Peak Haze 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 Peak Haze.

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

Data visualization

#4682B4#7BADD3#A5D6F2#E0FFFF#FFFFFF

Palette guide

How to use Glacial Peak Haze

Overview

The Glacial Peak Haze palette presents a crisp, serene collection of misty blues and pure whites, ideal for minimalist and airy designs. With the robust #4682B4, the calming #7BADD3, and the ethereal #A5D6F2, all culminating in the clean #E0FFFF and pure #FFFFFF, this palette evokes the breathtaking views of snow-capped peaks shrouded in a gentle haze. Designers and developers can utilize these hues to create interfaces that feel fresh, uncluttered, and highly sophisticated, perfect for conveying purity, clarity, and a modern aesthetic across various digital and print applications.

Best used for

Clean, minimalist website and app designs
Cloud computing and tech services branding
Medical and dental practice websites
Winter-themed event branding and decor
Luxury spa branding (cleanliness focus)
High-tech product interfaces

Suggested color roles

primary

Utilize #4682B4 as the strong, reliable steel blue for main headings, important calls-to-action, or primary branding elements.

secondary

Employ #7BADD3 for supporting content sections, subheadings, or secondary navigation, providing a calming blue presence.

accent

Apply #A5D6F2 for subtle highlights, background patterns, or decorative elements that require an airy, gentle touch.

background

The pure #FFFFFF provides a crisp, expansive canvas, ensuring excellent content readability and a clean aesthetic.

text

For body text, use #4682B4 on #FFFFFF to ensure excellent contrast and readability, or a dark gray/black for general content.

Accessibility notes

Ensure #4682B4 text on #FFFFFF background provides excellent contrast, meeting WCAG AAA standards.
Avoid using #E0FFFF or #A5D6F2 for any text on #FFFFFF, as contrast will be extremely poor.
Use #7BADD3 for larger headings on #FFFFFF, but always verify contrast for legibility.
Interactive elements should primarily use #4682B4 to ensure clear visibility and user interaction.

Recommended combinations

Clean Header

A strong blue header (#4682B4) on a pure white background (#FFFFFF), with a calming blue accent (#7BADD3) for balance.

#4682B4 · #FFFFFF · #7BADD3

Hazy UI

A mid-tone blue (#7BADD3) for content, a lighter blue panel (#A5D6F2), and a crisp white background (#FFFFFF) for an airy feel.

#7BADD3 · #A5D6F2 · #FFFFFF

Minimal Contrast

Combine the solid blue (#4682B4) with pure white (#FFFFFF) for strong contrast, using the near-white blue (#E0FFFF) for subtle depth.

#4682B4 · #FFFFFF · #E0FFFF

CSS variables

:root {
  --glacial-peak-haze-1: #4682B4;
  --glacial-peak-haze-2: #7BADD3;
  --glacial-peak-haze-3: #A5D6F2;
  --glacial-peak-haze-4: #E0FFFF;
  --glacial-peak-haze-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-peak-haze": {
        1: "#4682B4",
        2: "#7BADD3",
        3: "#A5D6F2",
        4: "#E0FFFF",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#4682B4

Color 2#7BADD3

Color 3#A5D6F2

Color 4#E0FFFF

Color 5#FFFFFF

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

3.9:1AA18

4.1:1AA18

1.7:1Fail

1.5:1Fail

2.3:1Fail

2.4:1Fail

2.6:1Fail

1.5:1Fail

1.6:1Fail

3.9:1AA18

2.3:1Fail

1.5:1Fail

1.1:1Fail

4.1:1AA18

2.4:1Fail

1.6:1Fail

1.1:1Fail

Similar palettes

More like Glacial Peak Haze

Glacial Peak Haze

See it in context.

Ready when you are.

Built with Glacial Peak Haze.

How to use Glacial Peak Haze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clean Header

Hazy UI

Minimal Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Glacial Peak Haze