Palette

Monochrome City Fog

A subtle gradient of grays capturing the mysterious, muted atmosphere of a city enveloped in fog.

monochromecalm5 colors

More monochrome 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

#36454F#5A5A5A#8A8A8A#B3B3B3#E0E0E0

Palette guide

How to use Monochrome City Fog

Overview

The "Monochrome City Fog" palette (version 3) offers a subtle and mysterious gradient of greys, expertly capturing the muted atmosphere of an urban landscape enveloped in fog. From the cool #36454F to the bright #E0E0E0, with intermediate shades like #5A5A5A, #8A8A8A, and #B3B3B3, this collection provides a calm yet sophisticated aesthetic. It's an excellent choice for designers and developers seeking to create serene, modern, and minimalist digital experiences. The gentle progression of tones allows for nuanced visual hierarchies and a sense of quiet elegance, ideal for projects that require an understated yet impactful presence, focusing on clarity and mood.

Best used for

Calm and meditative apps
Modern corporate branding
Architectural firm websites
Minimalist e-commerce platforms
Editorial design with a clean aesthetic
Urban-themed photography blogs

Suggested color roles

primary

Utilize #36454F as a strong, grounding color for main sections, headers, or backgrounds in a refined dark mode.

secondary

Apply #5A5A5A for secondary content blocks, sidebars, or subtle dividers, maintaining a sense of calm depth.

accent

Use #B3B3B3 or #E0E0E0 for subtle highlights, interactive elements, or iconography that needs gentle emphasis.

background

Employ #E0E0E0 for clean, spacious content areas, or #8A8A8A for a slightly darker, more contemplative backdrop.

text

For dark backgrounds, use #E0E0E0 or #B3B3B3. For light backgrounds like #E0E0E0, use #36454F or #5A5A5A for body text.

Accessibility notes

Ensure #36454F text on #E0E0E0 backgrounds meets WCAG AA contrast standards.
Avoid using #B3B3B3 text on #E0E0E0 backgrounds for small or critical text due to low contrast.
When using #5A5A5A as a background, ensure text in #B3B3B3 or #E0E0E0 has sufficient contrast.
Test all color pairings with accessibility tools to guarantee readability across different screen types.

Recommended combinations

Deep Clarity

A powerful cool dark base (#36454F) with crisp light text (#E0E0E0) and a medium grey for secondary information (#5A5A5A).

#36454F · #E0E0E0 · #5A5A5A

Foggy Layers

Creates a harmonious layered effect, suitable for complex UI elements or data visualizations with soft, muted transitions.

#5A5A5A · #8A8A8A · #B3B3B3

Clean Urban

Use #36454F for headings, #8A8A8A for subheadings, and #E0E0E0 as a background for clean, easy-to-read content.

#36454F · #8A8A8A · #E0E0E0

CSS variables

:root {
  --monochrome-city-fog-3-1: #36454F;
  --monochrome-city-fog-3-2: #5A5A5A;
  --monochrome-city-fog-3-3: #8A8A8A;
  --monochrome-city-fog-3-4: #B3B3B3;
  --monochrome-city-fog-3-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-city-fog-3": {
        1: "#36454F",
        2: "#5A5A5A",
        3: "#8A8A8A",
        4: "#B3B3B3",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5A5A5A

Color 3#8A8A8A

Color 4#B3B3B3

Color 5#E0E0E0

Accessibility

Contrast checker

1.4:1Fail

2.9:1Fail

4.7:1AA

7.5:1AAA

1.4:1Fail

2:1Fail

3.3:1AA18

5.2:1AA

2.9:1Fail

2:1Fail

1.6:1Fail

2.6:1Fail

4.7:1AA

3.3:1AA18

1.6:1Fail

7.5:1AAA

5.2:1AA

2.6:1Fail

1.6:1Fail

Similar palettes

More like Monochrome City Fog

Monochrome City Fog

See it in context.

Ready when you are.

Built with Monochrome City Fog.

How to use Monochrome City Fog

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Clarity

Foggy Layers

Clean Urban

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Monochrome City Fog