Palette

Foggy London Alley

Captures the mysterious and muted tones of a misty, historic city alleyway at dusk.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Foggy London Alley 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 Foggy London Alley.

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

Data visualization

#A0A0A0#787878#505050#303030#181818

Palette guide

How to use Foggy London Alley

Overview

The Foggy London Alley palette captures the mysterious and muted tones of a misty, historic city alleyway at dusk. This monochrome collection, ranging from light grey #A0A0A0 to deep charcoal #181818, offers a sophisticated and understated aesthetic. Designers and developers can leverage these cool greys to create elegant, minimalist interfaces, noir-inspired branding, or atmospheric digital environments. The subtle shifts in tone provide depth without relying on bold color, making it ideal for projects that require a refined, serious, or introspective mood.

Best used for

Noir film aesthetics and graphic novels
Sophisticated luxury brand websites
Minimalist UI/UX design
Architectural visualization and renders
Dark mode themes for productivity apps
Photography portfolios with dramatic mood

Suggested color roles

primary

Use #303030 for main content, strong text, or foundational elements to establish a solid presence.

secondary

Apply #505050 for supporting sections, background textures, or subtle dividers, adding depth without harsh contrast.

accent

Utilize #A0A0A0 for highlights, hover states, or subtle graphical details to provide definition against darker tones.

background

A deep charcoal like #181818 provides an immersive, atmospheric base that allows lighter greys to stand out softly.

text

#A0A0A0 or #787878 offers excellent readability against the darker backgrounds, maintaining the monochromatic feel.

Accessibility notes

Ensure sufficient contrast between different shades of grey, especially for text on backgrounds.
Avoid using #A0A0A0 on #787878 for small text, as contrast may be insufficient for readability.
Use darker greys (#303030, #181818) for essential text where clarity is paramount.
Consider an option for a slightly brighter text or accent color if strict WCAG AA contrast is difficult to achieve with adjacent greys.

Recommended combinations

Deep Shadow

For creating a rich, deep aesthetic with subtle layering, perfect for dark mode or dramatic backgrounds.

#181818 · #303030 · #505050

Misty Path

Ideal for a lighter, more ethereal feel, suitable for secondary content or atmospheric elements.

#A0A0A0 · #787878 · #505050

Urban Contrast

A balanced trio for defining clear sections and providing visual hierarchy in minimalist designs.

#303030 · #A0A0A0 · #181818

CSS variables

:root {
  --foggy-london-alley-1: #A0A0A0;
  --foggy-london-alley-2: #787878;
  --foggy-london-alley-3: #505050;
  --foggy-london-alley-4: #303030;
  --foggy-london-alley-5: #181818;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-london-alley": {
        1: "#A0A0A0",
        2: "#787878",
        3: "#505050",
        4: "#303030",
        5: "#181818",
      }
    }
  }
}

Hex values

Color 1#A0A0A0

Color 2#787878

Color 3#505050

Color 4#303030

Color 5#181818

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5:1AA

6.8:1AA

1.7:1Fail

1.8:1Fail

3:1Fail

4:1AA18

3.1:1AA18

1.8:1Fail

1.6:1Fail

2.2:1Fail

5:1AA

3:1Fail

1.6:1Fail

1.3:1Fail

6.8:1AA

4:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Foggy London Alley

Rainy City Reflections

Urban Grime Edge

Urban Shadow Play