Back to palettes

Palette

Monochromatic Foggy City

Subtle shifts in grey evoke the muted, structured beauty of a city veiled in gentle fog.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochromatic Foggy City 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 Monochromatic Foggy City.

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

Data visualization

#505050#707070#909090#B0B0B0#D0D0D0

Palette guide

How to use Monochromatic Foggy City

Overview

The Monochromatic Foggy City palette captures the tranquil and structured essence of an urban landscape veiled in mist. This sophisticated grayscale features a range from a solid #505050 to a soft #D0D0D0, with intermediate tones like #707070, #909090, and #B0B0B0. It's a versatile choice for designs aiming for a modern, understated, and calm aesthetic. Designers can use these subtle shifts in gray to create depth, hierarchy, and a sense of refined minimalism across digital interfaces, print materials, or architectural visualizations. Developers will appreciate the clean lines and easy contrast management this palette offers.

Best used for

  • Urban photography websites or portfolios
  • Modern architectural design presentations
  • Tech startup landing pages
  • Minimalist app interfaces
  • Corporate reports and dashboards
  • Fashion or luxury product displays

Suggested color roles

primary

#505050 provides a strong, anchoring presence for important headings, navigation, or footer sections, ensuring clarity.

secondary

#707070 is suitable for subheadings, borders, or slightly darker background panels, offering a gentle contrast.

accent

#909090 can be used for secondary text, icons, or subtle interactive elements, maintaining the muted aesthetic.

background

#D0D0D0 or #B0B0B0 serves as an excellent, soft main background, providing ample space for darker text to breathe.

text

#505050 or #707070 on lighter backgrounds like #D0D0D0 or white offers optimal readability for body text.

Accessibility notes

  • Ensure sufficient contrast when using #B0B0B0 text on #D0D0D0 backgrounds; it may not pass WCAG AA.
  • Always use a dark gray (#505050 or #707070) for primary text on light backgrounds to ensure readability.
  • Interactive elements should have distinct hover/focus states, perhaps using a darker shade from the palette.
  • Avoid using very light grays for small text to prevent readability issues, especially on subtle backgrounds.

Recommended combinations

Urban Horizon

Ideal for headers and main content, using #D0D0D0 as background, #505050 for titles, and #707070 for key information.

#505050 · #D0D0D0 · #707070

Misty Layers

Creates a harmonious, layered effect for UI components or cards, offering subtle depth and a calm feel.

#707070 · #909090 · #B0B0B0

Concrete Calm

Excellent for minimalist web pages, using #D0D0D0 as the dominant background, #505050 for primary text, and #909090 for subtle details.

#D0D0D0 · #505050 · #909090

CSS variables

:root {
  --monochromatic-foggy-city-1: #505050;
  --monochromatic-foggy-city-2: #707070;
  --monochromatic-foggy-city-3: #909090;
  --monochromatic-foggy-city-4: #B0B0B0;
  --monochromatic-foggy-city-5: #D0D0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochromatic-foggy-city": {
        1: "#505050",
        2: "#707070",
        3: "#909090",
        4: "#B0B0B0",
        5: "#D0D0D0",
      }
    }
  }
}

Related searches

foggy grey color schemeurban monochrome palettecalm minimalist ui designstructured gray tonesmodern city web colors

Palette colors

Hex values

Color 1#505050
·
Color 2#707070
·
Color 3#909090
·
Color 4#B0B0B0
·
Color 5#D0D0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.7:1AA18
5.2:1AA
2
1.6:1Fail
1.6:1Fail
2.3:1Fail
3.2:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2.1:1Fail
4
3.7:1AA18
2.3:1Fail
1.5:1Fail
1.4:1Fail
5
5.2:1AA
3.2:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Monochromatic Foggy City

View all monochrome
Industrial Loft Hues
Monochromatic Mist
Urban Zen Garden
Basalt Stream Pebble
Calm Stone Meditate
City Loft Minimal