Back to palettes

Palette

Mountain Fog Horizon

Muted grays and soft blues capture the serene, misty awakening of mountains at dawn.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B5B69#708090#A2B9C7#C6D4DF#E6EFF5

Palette guide

How to use Mountain Fog Horizon

Overview

The Mountain Fog Horizon palette captures the serene, misty awakening of mountains at dawn, blending muted grays and soft blues. This tranquil collection ranges from the deeper, grounding #4B5B69 to the airy, almost white #E6EFF5. Key colors like the mid-tone gray-blue #708090 and the lighter #A2B9C7 provide a gentle progression of atmospheric depth. This palette is perfect for designs aiming to evoke calm, clarity, and a sophisticated natural aesthetic. Designers can leverage its subtle contrasts and harmonious cool tones to create a sense of peace and spaciousness across various digital and print applications, ideal for conveying a fresh, understated elegance.

Best used for

  • corporate professional websites
  • financial services branding
  • tech company dashboards
  • sustainable architecture presentations
  • winter apparel e-commerce
  • travel and tourism brochures

Suggested color roles

primary

Use #4B5B69 as a strong primary for main navigation or foundational elements, offering a deep, sophisticated anchor.

secondary

Apply #708090 for secondary content blocks or larger graphical elements, providing a balanced, cool mid-tone.

accent

Introduce #A2B9C7 as a subtle accent for interactive states or highlights, adding a touch of refreshing clarity.

background

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

text

For optimal readability, use #4B5B69 for text on #E6EFF5, or a dark charcoal for text on any of the lighter shades.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing mid-tones like #708090 with #A2B9C7.
  • Text in #4B5B69 on #E6EFF5 provides excellent readability and adherence to WCAG standards.
  • Avoid using #C6D4DF for small text on #E6EFF5 as contrast will likely be insufficient.
  • Pair #708090 with #E6EFF5 for larger text or UI elements to ensure good visibility.

Recommended combinations

Misty Dawn

Excellent for creating depth in UI elements or background gradients, mimicking a foggy horizon.

#4B5B69 · #708090 · #A2B9C7

Sky & Stone

Ideal for content sections, with #E6EFF5 as background, #C6D4DF for secondary text, and #708090 for headings.

#E6EFF5 · #C6D4DF · #708090

Cool Ascent

Suitable for subtle branding or icon sets, offering a natural cool progression with a strong anchor.

#A2B9C7 · #708090 · #4B5B69

CSS variables

:root {
  --mountain-fog-horizon-1: #4B5B69;
  --mountain-fog-horizon-2: #708090;
  --mountain-fog-horizon-3: #A2B9C7;
  --mountain-fog-horizon-4: #C6D4DF;
  --mountain-fog-horizon-5: #E6EFF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mountain-fog-horizon": {
        1: "#4B5B69",
        2: "#708090",
        3: "#A2B9C7",
        4: "#C6D4DF",
        5: "#E6EFF5",
      }
    }
  }
}

Related searches

misty gray blue palettecalm mountain colorsprofessional cool tonesserene fog color schememinimalist natural palette

Palette colors

Hex values

Color 1#4B5B69
·
Color 2#708090
·
Color 3#A2B9C7
·
Color 4#C6D4DF
·
Color 5#E6EFF5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.4:1AA18
4.6:1AA
6:1AA
2
1.7:1Fail
2:1Fail
2.7:1Fail
3.5:1AA18
3
3.4:1AA18
2:1Fail
1.3:1Fail
1.8:1Fail
4
4.6:1AA
2.7:1Fail
1.3:1Fail
1.3:1Fail
5
6:1AA
3.5:1AA18
1.8:1Fail
1.3:1Fail

Similar palettes

More like Mountain Fog Horizon

View all neutral