Back to palettes

Palette

Shadowed Alley Fog

A monochromatic exploration of the muted tones found in a foggy urban alleyway.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Alley 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 Shadowed Alley Fog.

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

Data visualization

#333333#555555#777777#999999#BBBBBB

Palette guide

How to use Shadowed Alley Fog

Overview

The "Shadowed Alley Fog" palette offers a compelling monochromatic journey through the muted, atmospheric tones of an urban alleyway shrouded in mist. This collection progresses from a deep, substantial gray #333333, through a series of mid-tones like #555555 and #777777, to a lighter, ethereal gray #999999, and finally a soft, misty gray #BBBBBB. This palette is exceptionally versatile for creating designs that require a sense of depth, subtlety, and a touch of urban mystery. It's ideal for projects that need to convey a calm, understated, yet intriguing mood.

Best used for

  • Urban photography and art portfolios
  • Dark mode UI for productivity apps
  • Mysterious branding for niche products
  • Architectural rendering backdrops
  • Minimalist website designs with a moody feel
  • Video game environments for atmospheric scenes

Suggested color roles

primary

#333333 (deep gray). A strong, versatile foundational color, excellent for primary backgrounds or content containers.

secondary

#555555 (medium dark gray). Use for supporting elements, sidebars, or to create subtle visual separation.

accent

#BBBBBB (soft misty gray). This lightest tone is perfect for subtle highlights, interactive elements, or secondary text on darker backgrounds.

background

#333333 (deep gray). Provides a solid, dark base, allowing for the strategic use of lighter grays for content.

text

#BBBBBB or white for main text on darker backgrounds like #333333; use a darker gray like #333333 for text on #BBBBBB.

Accessibility notes

  • Ensure #BBBBBB or white text provides sufficient contrast on #333333, #555555, and #777777 backgrounds.
  • Avoid using #777777 or #999999 for body text on #BBBBBB as contrast will be too low.
  • For interactive elements, clear hover/focus states are crucial, perhaps a slight brightening or a thin border.
  • Headings can use #999999 on #333333 for a sophisticated, subtle effect.

Recommended combinations

Foggy Depths

Ideal for creating layered, atmospheric backgrounds in digital interfaces or illustrations.

#333333 · #555555 · #777777

Misty Contrast

Effective for clear typography and minimalist layouts where text stands out subtly.

#333333 · #BBBBBB · #777777

Urban Texture

Excellent for subtle graphical elements, dividers, or background patterns.

#555555 · #999999 · #BBBBBB

CSS variables

:root {
  --shadowed-alley-fog-1: #333333;
  --shadowed-alley-fog-2: #555555;
  --shadowed-alley-fog-3: #777777;
  --shadowed-alley-fog-4: #999999;
  --shadowed-alley-fog-5: #BBBBBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-alley-fog": {
        1: "#333333",
        2: "#555555",
        3: "#777777",
        4: "#999999",
        5: "#BBBBBB",
      }
    }
  }
}

Related searches

urban gray color palettemoody monochrome schemeatmospheric city colorsdark subtle graysminimalist fog design

Palette colors

Hex values

Color 1#333333
·
Color 2#555555
·
Color 3#777777
·
Color 4#999999
·
Color 5#BBBBBB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.4:1AA18
6.6:1AA
2
1.7:1Fail
1.7:1Fail
2.6:1Fail
3.9:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.3:1Fail
4
4.4:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.6:1AA
3.9:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Shadowed Alley Fog

View all monochrome
Foggy London Alley
Urban Alley Whisper
Industrial Gear Grind
Monochrome City Fog
Noir Film Shadows
Rainy City Reflections