Back to palettes

Palette

Cloud Peak Summit

Soft blues and muted grays capture the serene, cool beauty of mountains shrouded in mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Peak Summit 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 Cloud Peak Summit.

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

Data visualization

#B0C4DE#A9A9A9#D3D3D3#F5F5F5#87CEEB

Palette guide

How to use Cloud Peak Summit

Overview

The Cloud Peak Summit palette captures the serene, cool beauty of mountains shrouded in mist with soft blues and muted grays. Featuring the refreshing #87CEEB and the deep yet subtle #A9A9A9, alongside airy tones like #B0C4DE, #D3D3D3, and #F5F5F5, this collection offers a sophisticated and calming aesthetic. It's an excellent choice for designers and developers aiming to evoke a sense of clarity, tranquility, and natural grandeur. Leverage these cool hues to create modern websites, pristine branding, or serene interfaces that convey professionalism and an expansive, open feel, reflecting the quiet majesty of alpine landscapes.

Best used for

  • Alpine resort branding
  • Minimalist tech interfaces
  • Outdoor gear websites
  • Architectural visualization
  • Winter sports marketing
  • Calm and professional presentations

Suggested color roles

primary

Use #A9A9A9 as the dominant, anchoring color for main headers, navigation, or strong brand elements. It provides a solid, neutral foundation.

secondary

Employ #B0C4DE for supporting sections, subheadings, or secondary content. It introduces a soft, cool blue element.

accent

Apply #87CEEB for drawing attention to calls-to-action, key data points, or subtle highlights. Its brighter blue provides a refreshing pop.

background

Utilize #F5F5F5 for clean, expansive backgrounds. This almost-white shade creates an airy, serene canvas, promoting readability.

text

For body text on light backgrounds like #F5F5F5 or #D3D3D3, #A9A9A9 provides good readability. Consider a very dark charcoal (#333333) for maximum contrast if needed.

Accessibility notes

  • Ensure #A9A9A9 text on #F5F5F5 or #D3D3D3 backgrounds meets WCAG contrast standards.
  • Avoid using #B0C4DE or #D3D3D3 text on #F5F5F5, as the contrast will be insufficient for legibility.
  • Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
  • For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Misty Ascent

Ideal for a sophisticated, calm theme. #A9A9A9 for primary, #B0C4DE for secondary, and #F5F5F5 for a serene background.

#A9A9A9 · #B0C4DE · #F5F5F5

Skyline Bright

Excellent for lighter sections or accents, evoking clarity and openness. #D3D3D3 as a base with #87CEEB for highlights.

#D3D3D3 · #87CEEB · #A9A9A9

Alpine Calm

Creates an airy, expansive feel. #A9A9A9 for grounding, #F5F5F5 as main background, with #87CEEB for accents.

#A9A9A9 · #F5F5F5 · #87CEEB

CSS variables

:root {
  --cloud-peak-summit-1: #B0C4DE;
  --cloud-peak-summit-2: #A9A9A9;
  --cloud-peak-summit-3: #D3D3D3;
  --cloud-peak-summit-4: #F5F5F5;
  --cloud-peak-summit-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-peak-summit": {
        1: "#B0C4DE",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#F5F5F5",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

cool grey blue palettemountain mist UI colorscalm alpine web designminimalist blue grey brandingserene peak color scheme

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#F5F5F5
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.2:1Fail
1.6:1Fail
1:1Fail
2
1.3:1Fail
1.6:1Fail
2.2:1Fail
1.3:1Fail
3
1.2:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail
4
1.6:1Fail
2.2:1Fail
1.4:1Fail
1.6:1Fail
5
1:1Fail
1.3:1Fail
1.2:1Fail
1.6:1Fail

Similar palettes

More like Cloud Peak Summit

View all cool
Cloud Capped Peaks
Fjord Mist Ascent
Alpine Mist
Misty Alpine Dawn
Misty Alpine Heights
Misty Alpine Peak