Palette

Glacial Ice Peaks

A tranquil and crisp palette reflecting the cool, muted blues and whites of ancient glacial peaks.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Ice Peaks 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 Ice Peaks.

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

Data visualization

#DDE7EE#C8D8E9#B0C9DA#98B8CB#7FA7B9

Palette guide

How to use Glacial Ice Peaks

Overview

The Glacial Ice Peaks palette offers a tranquil and crisp collection of muted blues and whites, echoing the serene beauty of ancient glacial peaks. This cool-toned palette gracefully transitions from the soft #DDE7EE to the deeper #7FA7B9, providing a sophisticated range for designers. It's perfectly suited for projects aiming to evoke calm, clarity, and understated elegance. The mid-tones like #C8D8E9 and #B0C9DA add subtle depth, while #98B8CB offers a stronger visual anchor. This palette is highly effective for creating clean, professional, and visually soothing digital experiences or branding materials.

Best used for

Corporate and professional websites
Luxury travel and tourism branding
Environmental and conservation initiatives
Minimalist user interfaces
High-end tech product design
Calming interior design schemes

Suggested color roles

primary

#7FA7B9 - This muted, deeper blue-grey serves as a strong primary for foundational elements, providing a sense of stability and depth.

secondary

#B0C9DA - A balanced mid-tone that works well for secondary navigation, card backgrounds, or subtle graphical elements, offering gentle visual separation.

accent

#DDE7EE - This very light, almost white tone provides a soft accent for hover states, subtle highlights, or delicate design flourishes without being stark white.

background

#DDE7EE - Ideal for main content areas, offering a clean, airy, and expansive backdrop that allows darker text and elements to stand out clearly.

text

#7FA7B9 - Excellent for primary body text on lighter backgrounds like #DDE7EE or #C8D8E9, ensuring good readability and maintaining the cool, serene aesthetic.

Accessibility notes

Ensure #7FA7B9 text on #DDE7EE background meets WCAG contrast standards for readability.
Avoid using mid-tones like #C8D8E9 or #B0C9DA for small text on light backgrounds to prevent insufficient contrast.
For interactive elements, use #7FA7B9 against lighter shades to clearly indicate clickability.
When layering colors, test adjacent lighter tones (e.g., #DDE7EE and #C8D8E9) for sufficient visual separation and hierarchy.

Recommended combinations

Clean Professional

Provides high contrast for text and background, ideal for headers, main content, and critical information in a professional context.

#7FA7B9 · #DDE7EE · #C8D8E9

Layered Serenity

Creates a gentle visual hierarchy and depth, suitable for card designs, layered UI elements, or subtle background patterns.

#C8D8E9 · #B0C9DA · #DDE7EE

Anchored Calm

Uses the darker blue as an anchor with the lightest for a background, and a mid-tone for secondary elements.

#98B8CB · #DDE7EE · #7FA7B9

CSS variables

:root {
  --glacial-ice-peaks-1: #DDE7EE;
  --glacial-ice-peaks-2: #C8D8E9;
  --glacial-ice-peaks-3: #B0C9DA;
  --glacial-ice-peaks-4: #98B8CB;
  --glacial-ice-peaks-5: #7FA7B9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-ice-peaks": {
        1: "#DDE7EE",
        2: "#C8D8E9",
        3: "#B0C9DA",
        4: "#98B8CB",
        5: "#7FA7B9",
      }
    }
  }
}

Hex values

Color 1#DDE7EE

Color 2#C8D8E9

Color 3#B0C9DA

Color 4#98B8CB

Color 5#7FA7B9

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.7:1Fail

2.1:1Fail

1.2:1Fail

1.4:1Fail

1.8:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.4:1Fail

1.2:1Fail

2.1:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Glacial Ice Peaks

Glacial Ice Peaks

See it in context.

Ready when you are.

Built with Glacial Ice Peaks.

How to use Glacial Ice Peaks

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clean Professional

Layered Serenity

Anchored Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Glacial Ice Peaks