Palette

Cloud Capped Peaks

Cool, muted blues and greys, inspired by the serene yet majestic sight of misty alpine peaks.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Capped 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 Cloud Capped Peaks.

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

Data visualization

#6E7B8C#9DB0C2#C7D8E6#4A5B6D#B3C8D4

Palette guide

How to use Cloud Capped Peaks

Overview

The Cloud Capped Peaks palette evokes the serene yet majestic sight of misty alpine peaks, featuring cool, muted blues and grays. Ranging from the light #C7D8E6 and #B3C8D4, through the mid-tones of #9DB0C2 and #6E7B8C, to the grounding depth of #4A5B6D, this collection offers a sophisticated and tranquil aesthetic. It is perfect for designs that aim to convey stability, natural beauty, and a sense of calm grandeur, making it highly suitable for outdoor, luxury, or corporate projects seeking a refined and understated visual identity.

Best used for

Outdoor adventure and travel brands
Nature documentary graphics
Travel blogs and photography portfolios
Winter sports apparel design
Luxury hotel and resort branding
Eco-friendly product packaging

Suggested color roles

primary

Use #C7D8E6 (lightest blue-grey) or #B3C8D4 (medium light blue-grey) for expansive backgrounds and main content areas.

secondary

Apply #9DB0C2 (mid-tone blue-grey) or #6E7B8C (deeper grey-blue) for sub-sections, navigation, or subtle dividers.

accent

Introduce #4A5B6D (darkest blue-grey) for strong headings, calls to action, or to define key elements.

background

A base of #C7D8E6 provides an airy, expansive feel, akin to a misty sky or distant peak.

text

For optimal readability on light backgrounds, use #4A5B6D or black. White text works well on #4A5B6D.

Accessibility notes

Prioritize high contrast for text; use #4A5B6D for most text on lighter backgrounds.
Ensure interactive elements are clearly distinguishable through sufficient contrast or visual cues.
Avoid using mid-tone blues for small text where contrast might be insufficient.
Verify all text and UI elements meet minimum contrast ratios using accessibility tools.

Recommended combinations

Misty Peaks

Creates a visual journey from light mist to solid rock, ideal for landscape-inspired designs.

#C7D8E6 · #9DB0C2 · #4A5B6D

Alpine Serenity

Perfect for a calm, layered look, reflecting the subtle shifts in mountain light and shadow.

#B3C8D4 · #6E7B8C · #C7D8E6

Summit Contrast

Offers a sophisticated, grounded feel with deep blues providing a strong anchor to lighter elements.

#4A5B6D · #9DB0C2 · #B3C8D4

CSS variables

:root {
  --cloud-capped-peaks-1: #6E7B8C;
  --cloud-capped-peaks-2: #9DB0C2;
  --cloud-capped-peaks-3: #C7D8E6;
  --cloud-capped-peaks-4: #4A5B6D;
  --cloud-capped-peaks-5: #B3C8D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-capped-peaks": {
        1: "#6E7B8C",
        2: "#9DB0C2",
        3: "#C7D8E6",
        4: "#4A5B6D",
        5: "#B3C8D4",
      }
    }
  }
}

Hex values

Color 1#6E7B8C

Color 2#9DB0C2

Color 3#C7D8E6

Color 4#4A5B6D

Color 5#B3C8D4

Accessibility

Contrast checker

1.9:1Fail

3:1Fail

1.6:1Fail

2.5:1Fail

1.9:1Fail

1.5:1Fail

3.1:1AA18

1.3:1Fail

3:1Fail

1.5:1Fail

4.8:1AA

1.2:1Fail

1.6:1Fail

3.1:1AA18

4.8:1AA

4:1AA18

2.5:1Fail

1.3:1Fail

1.2:1Fail

4:1AA18

Similar palettes

More like Cloud Capped Peaks

Glacial Mountain Dawn