Back to palettes

Palette

Misty Mountain Morning

Serene shades of gray and soft taupe, like distant mountains shrouded in a peaceful morning mist.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#BDBDBD#A9A9A9#808080#505050

Palette guide

How to use Misty Mountain Morning

Overview

The "Misty Mountain Morning" palette offers a sophisticated range of cool grays, evoking a serene and grounded atmosphere. With shades like the light #D3D3D3, the balanced #BDBDBD, and the deeper #A9A9A9, this neutral collection is perfect for creating minimalist, elegant designs. Developers will find these hex codes versatile for UI elements, typography, and backgrounds, ensuring a cohesive visual flow. The darker tones, #808080 and #505050, provide excellent contrast and depth, making them suitable for primary text or stronger visual anchors. This palette lends itself well to conveying professionalism, tranquility, and understated beauty in digital and print media alike.

Best used for

  • corporate websites and branding
  • minimalist UI design
  • fine art photography portfolios
  • architectural visualization
  • luxury product packaging
  • meditation or wellness app interfaces

Suggested color roles

primary

#A9A9A9 - A solid, versatile mid-tone for main content areas or substantial UI components, providing a calm and stable foundation.

secondary

#BDBDBD - Ideal for subheadings, secondary navigation, or card backgrounds, offering a softer presence than the primary color without losing clarity.

accent

#808080 - Use sparingly for interactive elements like buttons, icons, or subtle highlights where a touch more visual weight is needed to draw attention.

background

#D3D3D3 - A very light and airy background, perfect for clean layouts, allowing content to stand out without feeling stark white.

text

#505050 - An excellent choice for primary body text, offering strong readability against lighter backgrounds like #D3D3D3 or #BDBDBD, providing a soft contrast to pure black.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #D3D3D3 for backgrounds.
  • Test #505050 text on #D3D3D3 background for WCAG AA compliance (ratio 4.54:1, passes for normal text).
  • Avoid using #BDBDBD for small text on #D3D3D3 backgrounds, as contrast might be insufficient for some users.
  • Use #808080 or #505050 for interactive elements like buttons and links to ensure clear visibility and clickability.

Recommended combinations

Serene Base

Perfect for core content layouts, using the lightest shade as background, mid-tone for sections, and darkest for primary text.

#D3D3D3 · #A9A9A9 · #505050

Subtle Depth

Creates a more grounded feel, suitable for dashboards or data visualizations where a slightly darker base is desired for elements.

#BDBDBD · #808080 · #505050

Accent Contrast

Excellent for highlighting key information or calls to action, with a light background, strong text, and a distinct accent for interaction.

#D3D3D3 · #505050 · #808080

CSS variables

:root {
  --misty-mountain-morning-1: #D3D3D3;
  --misty-mountain-morning-2: #BDBDBD;
  --misty-mountain-morning-3: #A9A9A9;
  --misty-mountain-morning-4: #808080;
  --misty-mountain-morning-5: #505050;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-morning": {
        1: "#D3D3D3",
        2: "#BDBDBD",
        3: "#A9A9A9",
        4: "#808080",
        5: "#505050",
      }
    }
  }
}

Related searches

cool grey color schemeneutral branding paletteminimalist web design colorscalm ui colorsshades of grey for design

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#BDBDBD
·
Color 3#A9A9A9
·
Color 4#808080
·
Color 5#505050
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.6:1Fail
5.4:1AA
2
1.3:1Fail
1.3:1Fail
2.1:1Fail
4.3:1AA18
3
1.6:1Fail
1.3:1Fail
1.7:1Fail
3.4:1AA18
4
2.6:1Fail
2.1:1Fail
1.7:1Fail
2:1Fail
5
5.4:1AA
4.3:1AA18
3.4:1AA18
2:1Fail

Similar palettes

More like Misty Mountain Morning

View all neutral
Highlands Fog Hike
Meditative Rock Pool
Misty Mountain Trail
Misty Mountain Trail
Misty Peaks Veil
Morning Fog