Back to palettes

Palette

Monochrome Cityscape Fog

A stark, atmospheric palette capturing the muted tones of a city skyline shrouded in morning fog.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A3A3A#6C6C6C#9E9E9E#CFCFCF#E8E8E8

Palette guide

How to use Monochrome Cityscape Fog

Overview

The Monochrome Cityscape Fog palette offers a serene and atmospheric gradient of greys, perfectly capturing the muted tones of an urban skyline shrouded in mist. Ranging from the deep #3A3A3A to the ethereal #E8E8E8, with versatile mid-tones like #6C6C6C, #9E9E9E, and #CFCFCF, this palette provides a sophisticated foundation for minimalist designs. Designers can use it to evoke a sense of calm, spaciousness, and understated elegance. Developers will find it excellent for creating soft, balanced interfaces that minimize visual fatigue, ideal for content-heavy applications or atmospheric branding where subtlety and depth are key.

Best used for

  • Minimalist website designs and portfolios
  • Content-focused blogs and editorial layouts
  • Art gallery or photography exhibition branding
  • Wellness and mindfulness app interfaces
  • Elegant product packaging and branding
  • Atmospheric digital art or background textures

Suggested color roles

primary

Use #3A3A3A as a deep, anchoring color for headers or footers, providing strong contrast to lighter elements.

secondary

Employ #6C6C6C for subheadings, secondary text, or subtle dividers, maintaining a sense of depth.

accent

Leverage #E8E8E8 for highlights, interactive states, or as a crisp background for content sections, bringing light to the design.

background

Utilize #CFCFCF as a light, airy background for main content areas, promoting readability and a sense of openness.

text

For light backgrounds like #E8E8E8 or #CFCFCF, use #3A3A3A or #6C6C6C for optimal text readability.

Accessibility notes

  • Ensure high contrast when pairing text with backgrounds; for example, #3A3A3A on #E8E8E8 is excellent.
  • Avoid using #9E9E9E or #CFCFCF for small text on similar mid-tone backgrounds, as contrast may be too low.
  • The darkest color, #3A3A3A, should be used for critical text elements on light backgrounds to meet WCAG AA standards.
  • Consider increasing font size or weight when using #6C6C6C on #9E9E9E to improve readability for all users.

Recommended combinations

Foggy Depth

Ideal for header banners, feature cards, or sections needing a strong anchor with clear, readable content.

#3A3A3A · #CFCFCF · #6C6C6C

Soft Layers

Excellent for multi-layered UI elements, subtle background textures, or card components with gentle transitions.

#E8E8E8 · #9E9E9E · #CFCFCF

Highlight Contrast

Apply for interactive elements, buttons, or calls-to-action where a lighter background needs strong text contrast.

#6C6C6C · #E8E8E8 · #3A3A3A

CSS variables

:root {
  --monochrome-cityscape-fog-1: #3A3A3A;
  --monochrome-cityscape-fog-2: #6C6C6C;
  --monochrome-cityscape-fog-3: #9E9E9E;
  --monochrome-cityscape-fog-4: #CFCFCF;
  --monochrome-cityscape-fog-5: #E8E8E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-cityscape-fog": {
        1: "#3A3A3A",
        2: "#6C6C6C",
        3: "#9E9E9E",
        4: "#CFCFCF",
        5: "#E8E8E8",
      }
    }
  }
}

Related searches

atmospheric grey paletteminimalist fog color schemesoft urban monochromelight grey ui design colorscalm neutral website palette

Palette colors

Hex values

Color 1#3A3A3A
·
Color 2#6C6C6C
·
Color 3#9E9E9E
·
Color 4#CFCFCF
·
Color 5#E8E8E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
4.2:1AA18
7.3:1AAA
9.3:1AAA
2
2.2:1Fail
2:1Fail
3.4:1AA18
4.3:1AA18
3
4.2:1AA18
2:1Fail
1.7:1Fail
2.2:1Fail
4
7.3:1AAA
3.4:1AA18
1.7:1Fail
1.3:1Fail
5
9.3:1AAA
4.3:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Monochrome Cityscape Fog

View all monochrome
City Alley Shadow
City Grid Graphite
City Loft Grey
Industrial Steel Dawn
Urban Art Mural
Urban Grayscale Grit