Back to palettes

Palette

Monochrome City Fog

A gradient of dark to light grays mimics the diffused light and quiet mystery of a city enveloped in fog.

monochromedark5 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

#2C2C2C#484848#666666#888888#AAAAAA

Palette guide

How to use Monochrome City Fog

Overview

The "Monochrome City Fog" palette (version 2) offers a compelling gradient of dark to medium greys, perfectly mimicking the diffused light and quiet mystery of a city enveloped in fog. With deep #2C2C2C, balanced #484848 and #666666, and lighter #888888 and #AAAAAA, this collection provides a moody yet sophisticated aesthetic. It's an excellent choice for designers and developers aiming to create atmospheric, modern, and minimalist digital experiences. The subtle shifts in tone allow for effective visual hierarchy and a sense of quiet urbanity, making it ideal for projects that require a sleek, understated, and contemporary feel.

Best used for

  • Urban-themed websites and apps
  • Dark mode interfaces
  • Photography showcases
  • Modern art portfolios
  • Architectural visualization
  • Sleek tech product landing pages

Suggested color roles

primary

Use #2C2C2C as a dominant background or for strong headers, establishing a deep and moody foundation.

secondary

Apply #484848 or #666666 for secondary panels, navigation, or card backgrounds, providing subtle layering.

accent

Utilize #888888 or #AAAAAA for subtle highlights, interactive elements, or iconography that needs gentle emphasis.

background

Employ #2C2C2C or #484848 for a deep, immersive background, or #AAAAAA for a lighter, more open feel in certain sections.

text

For dark backgrounds, use #AAAAAA or white for body text. For lighter backgrounds like #AAAAAA, use #2C2C2C or #484848 for text.

Accessibility notes

  • Ensure high contrast between #2C2C2C text and #AAAAAA backgrounds (or vice-versa) for readability.
  • Avoid pairing #666666 with #888888 for small text; the contrast might be insufficient.
  • When using #AAAAAA as text on a darker background, verify it meets WCAG AA standards.
  • Test all text-background pairings with accessibility tools, especially for interactive components.

Recommended combinations

Misty Depths

Perfect for a dark theme: #2C2C2C as background, #AAAAAA for main text, and #484848 for secondary elements or borders.

#2C2C2C · #AAAAAA · #484848

Urban Layers

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

#484848 · #666666 · #888888

Clear Contrast

Use #2C2C2C for headings, #666666 for subheadings, and #AAAAAA as a background for clean, legible content.

#2C2C2C · #666666 · #AAAAAA

CSS variables

:root {
  --monochrome-city-fog-2-1: #2C2C2C;
  --monochrome-city-fog-2-2: #484848;
  --monochrome-city-fog-2-3: #666666;
  --monochrome-city-fog-2-4: #888888;
  --monochrome-city-fog-2-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-city-fog-2": {
        1: "#2C2C2C",
        2: "#484848",
        3: "#666666",
        4: "#888888",
        5: "#AAAAAA",
      }
    }
  }
}

Related searches

city fog color palettemonochromatic urban greymoody grey hex codesdark grey ui designminimalist city colors

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#484848
·
Color 3#666666
·
Color 4#888888
·
Color 5#AAAAAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.9:1AA18
6:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
3.9:1AA18
3
2.4:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
3.9:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6:1AA
3.9:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Monochrome City Fog

View all monochrome
Rainy City Reflections
City Twilight Mist
Foggy London Alley
Shadowed Alley Fog
Silent Fogbound Moor
Urban Alley Whisper