Back to palettes

Palette

Monochrome City Fog

A range of subtle grays that perfectly capture the muted, ethereal beauty of a city blanketed in fog.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome City Fog 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 Monochrome City Fog.

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

Data visualization

#707B7C#909899#AEB4B5#CBD1D2#ECF0F1

Palette guide

How to use Monochrome City Fog

Overview

The "Monochrome City Fog" palette (version 1) is a serene collection of subtle greys, perfectly capturing the ethereal beauty of a city blanketed in fog. Ranging from the gentle #707B7C to the almost white #ECF0F1, with mid-tones like #909899, #AEB4B5, and #CBD1D2, this palette creates a soft, minimalist, and inviting aesthetic. Designers and developers will find it ideal for projects that require a light, airy, and sophisticated feel, promoting a sense of calm and clarity. Its delicate shifts provide depth without harshness, making it excellent for interfaces and branding that prioritize quiet elegance and a natural, diffused light effect.

Best used for

  • Minimalist website designs
  • Wellness and lifestyle apps
  • Soft brand identities
  • Photography portfolios (light mode)
  • Interior design mood boards
  • Elegant e-commerce platforms

Suggested color roles

primary

Use #707B7C for subtle headers, footers, or navigation, providing a gentle anchoring point without being too dark.

secondary

Apply #909899 or #AEB4B5 for secondary sections, card backgrounds, or subtle dividers, creating soft layers.

accent

Utilize #CBD1D2 or #ECF0F1 for highlights, interactive elements, or iconography that needs a luminous touch.

background

Employ #ECF0F1 for main content areas and backgrounds to ensure maximum readability and a bright, open feel.

text

For body text, use #707B7C or #909899 on lighter backgrounds like #ECF0F1 or #CBD1D2 for optimal readability and a soft contrast.

Accessibility notes

  • Ensure #707B7C text on #ECF0F1 backgrounds meets WCAG AA contrast standards.
  • Avoid pairing #CBD1D2 with #ECF0F1 for small or critical text due to very low contrast.
  • For interactive elements, ensure hover/active states maintain sufficient contrast.
  • Test color pairings thoroughly, especially for text and small elements, to ensure universal readability.

Recommended combinations

Soft Foundation

Ideal for a light theme: #707B7C for clear text, #ECF0F1 as background, and #909899 for subtle borders or secondary text.

#707B7C · #ECF0F1 · #909899

Ethereal Layers

Creates delicate depth for layered UI components, such as cards on a background, with slight tonal shifts.

#909899 · #AEB4B5 · #CBD1D2

Luminous Read

Use #707B7C for headings, #AEB4B5 for subheadings, and #ECF0F1 as a background for a clean, light reading experience.

#707B7C · #AEB4B5 · #ECF0F1

CSS variables

:root {
  --monochrome-city-fog-1: #707B7C;
  --monochrome-city-fog-2: #909899;
  --monochrome-city-fog-3: #AEB4B5;
  --monochrome-city-fog-4: #CBD1D2;
  --monochrome-city-fog-5: #ECF0F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-city-fog": {
        1: "#707B7C",
        2: "#909899",
        3: "#AEB4B5",
        4: "#CBD1D2",
        5: "#ECF0F1",
      }
    }
  }
}

Related searches

light grey color schememonochromatic airy palettesubtle neutral hex codesminimalist UI greyfoggy urban colors

Palette colors

Hex values

Color 1#707B7C
·
Color 2#909899
·
Color 3#AEB4B5
·
Color 4#CBD1D2
·
Color 5#ECF0F1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
2.8:1Fail
3.8:1AA18
2
1.5:1Fail
1.4:1Fail
1.9:1Fail
2.6:1Fail
3
2.1:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
2.8:1Fail
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
3.8:1AA18
2.6:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Monochrome City Fog

View all neutral
Concrete Jungle Bloom
Metro Grid Hues
Misty Mountain Zen
Silent Zen Cairn
Steel Frame Metropolis
Urban Canvas Grey