Back to palettes

Palette

Mountain Fog Blanket

A tranquil blend of soft grays and blues, like a gentle fog settling over distant mountain peaks.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mountain Fog Blanket 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 Mountain Fog Blanket.

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

Data visualization

#DCDCDC#B0C4DE#A9BCCC#9BAEBE#8A9AA8

Palette guide

How to use Mountain Fog Blanket

Overview

The Mountain Fog Blanket palette offers a tranquil blend of soft grays and muted blues, perfectly capturing the serene essence of fog settling over distant mountain peaks. This calming collection features the light, airy gray of #DCDCDC, the gentle blue-gray of #B0C4DE, and the slightly deeper #A9BCCC. Progressing to the more substantial #9BAEBE and #8A9AA8, the palette provides a subtle gradient of cool, atmospheric tones. It's ideal for designs seeking to evoke peace, clarity, and a quiet sophistication. Designers can leverage its gentle contrasts and harmonious hues to create a sense of calm and spaciousness across various digital and print applications.

Best used for

  • wellness and mindfulness apps
  • luxury spa branding
  • minimalist website design
  • cloud computing services
  • winter fashion lookbooks
  • architectural design portfolios

Suggested color roles

primary

Use #8A9AA8 as a primary color for main navigation or foundational elements, providing a soft, stable anchor.

secondary

Apply #9BAEBE for secondary content panels or graphical elements, offering a gentle, cool mid-tone.

accent

Introduce #B0C4DE as a subtle accent for interactive states or highlights, adding a touch of cool freshness.

background

Employ #DCDCDC for clean, expansive backgrounds, offering excellent readability for darker text and a sense of openness.

text

For optimal readability, use a dark charcoal or black for text on #DCDCDC, or #8A9AA8 for text on #DCDCDC or #B0C4DE.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter grays/blues together.
  • Dark charcoal or black text on #DCDCDC provides excellent readability.
  • Avoid using #B0C4DE for small text on #A9BCCC as contrast may be insufficient.
  • Pair #8A9AA8 with #DCDCDC for larger text or UI elements to ensure good visibility.

Recommended combinations

Misty Peaks

Excellent for clean hero sections or background gradients, evoking a layered fog effect.

#DCDCDC · #B0C4DE · #9BAEBE

Foggy Horizon

Ideal for content sections, with #A9BCCC as a base, #8A9AA8 for headings, and #DCDCDC for subtle accents.

#A9BCCC · #8A9AA8 · #DCDCDC

Cloud Cover

Suitable for data visualization or progress indicators, showing subtle progression in cool tones.

#B0C4DE · #9BAEBE · #8A9AA8

CSS variables

:root {
  --mountain-fog-blanket-1: #DCDCDC;
  --mountain-fog-blanket-2: #B0C4DE;
  --mountain-fog-blanket-3: #A9BCCC;
  --mountain-fog-blanket-4: #9BAEBE;
  --mountain-fog-blanket-5: #8A9AA8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mountain-fog-blanket": {
        1: "#DCDCDC",
        2: "#B0C4DE",
        3: "#A9BCCC",
        4: "#9BAEBE",
        5: "#8A9AA8",
      }
    }
  }
}

Related searches

misty mountain palettecool gray blue schemecalm neutral colorsfoggy tranquil designminimalist cool palette

Palette colors

Hex values

Color 1#DCDCDC
·
Color 2#B0C4DE
·
Color 3#A9BCCC
·
Color 4#9BAEBE
·
Color 5#8A9AA8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.4:1Fail
1.7:1Fail
2.1:1Fail
2
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.6:1Fail
3
1.4:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
4
1.7:1Fail
1.3:1Fail
1.2:1Fail
1.3:1Fail
5
2.1:1Fail
1.6:1Fail
1.5:1Fail
1.3:1Fail

Similar palettes

More like Mountain Fog Blanket

View all cool
Coastal Morning Fog
Misty Mountain
Agate Grotto
Alpine Mist
Cloud Capped Peaks
Cloud Forest Haze