Back to palettes

Palette

Urban Mist Shade

A sophisticated monochrome blend, inspired by the muted, cool tones of a misty metropolitan morning.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Mist Shade 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 Urban Mist Shade.

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

Data visualization

#36454F#5A6269#8D949B#B8BCC0#D3D7DC

Palette guide

How to use Urban Mist Shade

Overview

The Urban Mist Shade palette is a sophisticated monochrome blend, inspired by the muted, cool tones of a misty metropolitan morning. Ranging from the deep #36454F to the light #D3D7DC, with harmonious mid-grays like #5A6269, #8D949B, and #B8BCC0, this collection offers subtle depth and understated elegance. It's ideal for designers seeking a minimalist, modern aesthetic that evokes calm and professionalism. The palette's cohesive nature ensures a refined look, perfect for corporate or high-tech applications where clarity and sophistication are paramount.

Best used for

  • Corporate finance branding
  • Luxury automotive interfaces
  • Architectural design firms
  • Tech product interfaces
  • Sophisticated menswear branding
  • Industrial design portfolios

Suggested color roles

primary

#36454F serves as a strong, deep anchor for headings, navigation, and key informational blocks, providing clear visual hierarchy.

secondary

#5A6269 is suitable for subheadings, informational text, and UI components, offering a smooth transition from the primary color.

accent

#8D949B works well for subtle UI elements, borders, or inactive states, adding a gentle touch of visual separation.

background

#D3D7DC provides a light, cool, and clean base for content, promoting a sense of calm and clarity.

text

For main body text, use #36454F on light backgrounds like #D3D7DC to ensure optimal readability and a professional appearance.

Accessibility notes

  • #36454F on #D3D7DC offers good contrast, making it ideal for primary text and important information.
  • #5A6269 can be used for secondary text on #D3D7DC, but verify contrast for smaller font sizes to maintain readability.
  • #8D949B and #B8BCC0 are generally too light for body text; reserve them for backgrounds, dividers, or large graphic elements.
  • Ensure sufficient contrast for interactive elements, especially if using lighter shades for their inactive states.

Recommended combinations

Deep & Muted

Creates a sophisticated and clean composition, perfect for corporate presentations and modern layouts.

#36454F · #D3D7DC · #8D949B

Subtle Layers

Offers a modern and understated blend, great for layered backgrounds or subtle UI elements.

#5A6269 · #B8BCC0 · #36454F

Misty Grays

Provides a soft and harmonious feel, suitable for minimalist designs requiring delicate tonal variation.

#8D949B · #D3D7DC · #5A6269

CSS variables

:root {
  --urban-mist-shade-1: #36454F;
  --urban-mist-shade-2: #5A6269;
  --urban-mist-shade-3: #8D949B;
  --urban-mist-shade-4: #B8BCC0;
  --urban-mist-shade-5: #D3D7DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-mist-shade": {
        1: "#36454F",
        2: "#5A6269",
        3: "#8D949B",
        4: "#B8BCC0",
        5: "#D3D7DC",
      }
    }
  }
}

Related searches

cool grey palettemonochrome city colorssophisticated neutral schememisty morning aestheticminimalist corporate design

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A6269
·
Color 3#8D949B
·
Color 4#B8BCC0
·
Color 5#D3D7DC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.2:1AA18
5.2:1AA
6.8:1AA
2
1.6:1Fail
2:1Fail
3.2:1AA18
4.3:1AA18
3
3.2:1AA18
2:1Fail
1.6:1Fail
2.1:1Fail
4
5.2:1AA
3.2:1AA18
1.6:1Fail
1.3:1Fail
5
6.8:1AA
4.3:1AA18
2.1:1Fail
1.3:1Fail

Similar palettes

More like Urban Mist Shade

View all monochrome
Grayscale Metropolis Grid
Urban Echo Stone
Urban Stone Path
City Grayscale View
Concrete Bloom Grey
Concrete Jungle Bloom