Back to palettes

Palette

Misty Mountain Zen

Soft, muted greys with a hint of ethereal blue, reflecting the quiet beauty of a fog-laden mountain range.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Mountain Zen 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 Misty Mountain Zen.

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

Data visualization

#708090#A9A9A9#D3D3D3#F5F5F5#ADD8E6

Palette guide

How to use Misty Mountain Zen

Overview

The Misty Mountain Zen palette offers a serene and minimalist collection of soft, muted greys with an ethereal touch of blue, reflecting the quiet beauty of a fog-laden mountain range. Key colors include the grounding #708090 (Slate Gray), the balanced #A9A9A9 (Dark Gray), and the airy #F5F5F5 (White Smoke), complemented by the gentle #ADD8E6 (Light Blue). This palette is perfectly suited for designs that aim to evoke calmness, clarity, and a sense of understated elegance. It provides a harmonious foundation for clean, modern aesthetics where tranquility is paramount.

Best used for

  • Spa and wellness branding
  • Meditation and mindfulness apps
  • Minimalist website designs
  • Modern architectural presentations
  • Natural beauty product packaging
  • Serene digital art and illustration

Suggested color roles

primary

Use #708090 as a stable, grounding color for main navigation, key text, or foundational elements. It offers good contrast.

secondary

Employ #A9A9A9 for supportive content, secondary buttons, or subtle background variations to maintain balance without visual noise.

accent

Apply #ADD8E6 as a delicate, airy accent for interactive elements, subtle highlights, or to introduce a touch of ethereal calm.

background

Utilize #F5F5F5 as the primary clean, light canvas, providing ample space and brightness. #D3D3D3 can be used for secondary background sections.

text

For optimal readability on light backgrounds, use #708090 or a deep charcoal. For darker elements, consider white or a very light grey.

Accessibility notes

  • Ensure adequate contrast when using #F5F5F5 or #D3D3D3 as backgrounds, especially for text and interactive elements.
  • Test the readability of #A9A9A9 text on backgrounds like #D3D3D3 to meet WCAG AA standards for small text.
  • Prioritize #708090 for critical text on light backgrounds to ensure maximum legibility.
  • Avoid using #ADD8E6 for small text unless it has sufficient contrast against its background.

Recommended combinations

Zen Foundation

Establishes a clean, calming base with strong, readable text and a soft, ethereal accent.

#F5F5F5 · #708090 · #ADD8E6

Gentle Contrast

Creates subtle depth and harmony, ideal for layered UI elements or content blocks without harsh boundaries.

#D3D3D3 · #A9A9A9 · #ADD8E6

Minimal Depth

Perfect for a minimalist approach where #708090 defines structure, #A9A9A9 adds detail, and #F5F5F5 provides spaciousness.

#708090 · #A9A9A9 · #F5F5F5

CSS variables

:root {
  --misty-mountain-zen-1: #708090;
  --misty-mountain-zen-2: #A9A9A9;
  --misty-mountain-zen-3: #D3D3D3;
  --misty-mountain-zen-4: #F5F5F5;
  --misty-mountain-zen-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-zen": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#F5F5F5",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

zen color paletteminimalist grey bluecalm design colorssubtle mountain tonesethereal cool palette

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#F5F5F5
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
3.7:1AA18
2.7:1Fail
2
1.7:1Fail
1.6:1Fail
2.2:1Fail
1.5:1Fail
3
2.7:1Fail
1.6:1Fail
1.4:1Fail
1:1Fail
4
3.7:1AA18
2.2:1Fail
1.4:1Fail
1.4:1Fail
5
2.7:1Fail
1.5:1Fail
1:1Fail
1.4:1Fail

Similar palettes

More like Misty Mountain Zen

View all neutral
Calm Interior Lines
Calm Stone Pathway
Cloudy Cobblestone Lane
Gallery Wall Calm
Monochrome City Fog
Muted Haze Comfort