Back to palettes

Palette

Foggy Mountain Ascent

A serene transition of soft greys, mirroring a gradual climb through a mist-shrouded peak.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Foggy Mountain Ascent 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 Foggy Mountain Ascent.

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

Data visualization

#778899#A9A9A9#C0C0C0#D3D3D3#EAEAEA

Palette guide

How to use Foggy Mountain Ascent

Overview

The Foggy Mountain Ascent palette presents a serene transition of soft greys, mirroring a gradual climb through a mist-shrouded peak. This monochrome collection, ranging from the cool #778899 to the almost-white #EAEAEA, is perfect for conveying subtlety, minimalism, and a calm, cool aesthetic. Designers and developers can leverage these gentle gradient tones to create sophisticated minimalist interfaces, luxury branding, or serene digital environments. The delicate shifts in shade provide depth without relying on stark contrast, making it ideal for projects that require a refined, understated, and timeless feel.

Best used for

  • Minimalist web and app design
  • Luxury brand identity
  • Art and photography portfolios
  • Subtle background textures and gradients
  • Clean, modern corporate websites
  • Wellness and meditation app interfaces

Suggested color roles

primary

Use #778899 for main headings, strong call-to-actions, or foundational elements to establish a solid yet soft presence.

secondary

Apply #A9A9A9 for supporting text, navigation, or subtle dividers, providing a gentle contrast.

accent

Utilize #C0C0C0 for hover states, subtle borders, or delicate graphical details, offering a slight lift.

background

The very light #EAEAEA serves as an excellent primary background, creating a clean, airy, and spacious canvas.

text

#778899 or a dark charcoal provides optimal readability on lighter backgrounds like #EAEAEA or #D3D3D3.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter shades like #D3D3D3 on #EAEAEA, which may be too low.
  • For critical information, use darker text colors such as #778899 against the lightest backgrounds.
  • Avoid using adjacent mid-tone colors for small text on similarly toned backgrounds, as readability will suffer.
  • Provide ample spacing and clear typography to enhance readability within this subtle palette.

Recommended combinations

Mist Gradient

For creating soft, ethereal background gradients or layering elements with subtle depth.

#EAEAEA · #D3D3D3 · #C0C0C0

Cool Ascent

Ideal for layered sections or defining hierarchy with a gentle, cool transition.

#778899 · #A9A9A9 · #C0C0C0

Minimalist Fog

A light and airy combination perfect for primary UI, offering a clean and understated look.

#A9A9A9 · #D3D3D3 · #EAEAEA

CSS variables

:root {
  --foggy-mountain-ascent-1: #778899;
  --foggy-mountain-ascent-2: #A9A9A9;
  --foggy-mountain-ascent-3: #C0C0C0;
  --foggy-mountain-ascent-4: #D3D3D3;
  --foggy-mountain-ascent-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-mountain-ascent": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#EAEAEA",
      }
    }
  }
}

Related searches

subtle grey paletteminimalist cool colorsserene gradientmist inspired designlight monochrome

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#C0C0C0
·
Color 4#D3D3D3
·
Color 5#EAEAEA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.4:1Fail
3:1AA18
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
3
2:1Fail
1.3:1Fail
1.2:1Fail
1.5:1Fail
4
2.4:1Fail
1.6:1Fail
1.2:1Fail
1.2:1Fail
5
3:1AA18
2:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Foggy Mountain Ascent

View all monochrome
Dusky Meadow Mist
Ink Wash Serenity
Misty Greyscale Vista
Morning Fog
Rainy Pavement Gray
Soft Greige Cloud