Back to palettes

Palette

Glacier Peak Serene

Crisp blues and whites capturing the majestic calm of towering glacier peaks under a clear winter sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacier Peak Serene 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 Glacier Peak Serene.

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

Data visualization

#6F8FA1#9EBECB#C2DCE4#E5F3F7#4E6A78

Palette guide

How to use Glacier Peak Serene

Overview

The Glacier Peak Serene palette offers a tranquil and sophisticated blend of cool blues and greys, perfect for conveying calm and clarity. Anchored by the deep, grounding tone of #4E6A78, it ascends through the versatile mid-tones of #6F8FA1 and #9EBECB, culminating in the airy lightness of #C2DCE4 and the crisp, near-white #E5F3F7. This collection evokes the majestic calm of towering glacier peaks under a clear winter sky, making it ideal for designs that require a sense of peace, stability, and subtle elegance. Developers will find these shades excellent for creating harmonious UI components, while designers can leverage them for corporate branding, wellness apps, or serene digital landscapes. The balanced range ensures versatility across various applications, from dominant backgrounds to subtle highlights.

Best used for

  • Corporate websites and branding focused on trust and stability
  • Wellness, spa, or meditation app interfaces
  • High-end interior design visualization
  • Winter-themed marketing materials
  • Educational platforms requiring a focused, calm environment
  • Environmental or conservation organization branding

Suggested color roles

primary

Use #4E6A78 for strong headings, primary buttons, or impactful design elements that need to convey authority and depth.

secondary

#6F8FA1 works well for subheadings, secondary calls to action, or larger blocks of color that require a slightly softer presence than the primary.

accent

#9EBECB can be used for interactive states, subtle highlights, or as a contrasting element against the darker shades to add a touch of cool brightness.

background

#E5F3F7 provides a clean, airy canvas, ideal for main content areas or as a soft background for hero sections, ensuring excellent readability.

text

For optimal contrast on light backgrounds like #E5F3F7, use #4E6A78 or a deep charcoal black. For text on darker backgrounds, use #E5F3F7.

Accessibility notes

  • Ensure sufficient contrast when placing #4E6A78 text on #E5F3F7 background.
  • Test text readability when using lighter shades like #C2DCE4 on #E5F3F7; consider increasing font weight or size.
  • Avoid using #9EBECB for small text elements against #C2DCE4 due to low contrast.
  • When designing for color blindness, rely on sufficient luminance contrast rather than hue differences alone.

Recommended combinations

Deep Serenity

Excellent for corporate themes; #4E6A78 for strong headers, #6F8FA1 for sub-elements, and #E5F3F7 as a clean background.

#4E6A78 · #6F8FA1 · #E5F3F7

Icy Contrast

Creates a balanced, cool aesthetic. #6F8FA1 as a main color, #C2DCE4 for lighter sections, with #4E6A78 for impactful accents or text.

#6F8FA1 · #C2DCE4 · #4E6A78

Soft Horizon

Ideal for serene backgrounds or subtle gradients, with #9EBECB adding a gentle depth and #E5F3F7 as a bright base.

#9EBECB · #E5F3F7 · #C2DCE4

CSS variables

:root {
  --glacier-peak-serene-1: #6F8FA1;
  --glacier-peak-serene-2: #9EBECB;
  --glacier-peak-serene-3: #C2DCE4;
  --glacier-peak-serene-4: #E5F3F7;
  --glacier-peak-serene-5: #4E6A78;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacier-peak-serene": {
        1: "#6F8FA1",
        2: "#9EBECB",
        3: "#C2DCE4",
        4: "#E5F3F7",
        5: "#4E6A78",
      }
    }
  }
}

Related searches

cool blue grey color schemeserene winter paletteglacier inspired design colorscalm professional brandinglight blue grey ui colors

Palette colors

Hex values

Color 1#6F8FA1
·
Color 2#9EBECB
·
Color 3#C2DCE4
·
Color 4#E5F3F7
·
Color 5#4E6A78
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
3:1AA18
1.7:1Fail
2
1.7:1Fail
1.4:1Fail
1.7:1Fail
2.9:1Fail
3
2.4:1Fail
1.4:1Fail
1.3:1Fail
4:1AA18
4
3:1AA18
1.7:1Fail
1.3:1Fail
5.1:1AA
5
1.7:1Fail
2.9:1Fail
4:1AA18
5.1:1AA

Similar palettes

More like Glacier Peak Serene

View all cool