Back to palettes

Palette

Urban Alley Whisper

Deep, subdued greys evoking the quiet, shadowed corners and hidden details of a city alleyway.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Alley Whisper 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 Urban Alley Whisper.

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

Data visualization

#4F4F4F#696969#808080#36454F#2F4F4F

Palette guide

How to use Urban Alley Whisper

Overview

The Urban Alley Whisper palette is a collection of deep, subdued greys designed to evoke the quiet, shadowed corners of a city. Featuring shades like the foundational #4F4F4F and the slightly warmer #696969, alongside the profound blue-grey of #36454F and the mysterious teal-grey of #2F4F4F, this palette offers a sophisticated, introspective mood. Designers can leverage these tones to create minimalistic, elegant interfaces, or to infuse a sense of mystery and depth into branding. Developers will find these hex codes ideal for dark mode themes, subtle UI elements, and backgrounds that require a serious, grounded aesthetic. The mid-grey #808080 provides a crucial lighter touch for contrast within this otherwise dark spectrum.

Best used for

  • Dark mode UI themes for productivity apps
  • Luxury brand websites and digital portfolios
  • Cinematic or photographic portfolio sites
  • Architectural and interior design presentations
  • Video game environments (e.g., urban exploration, noir)
  • Sophisticated, minimalist branding for tech companies

Suggested color roles

primary

#4F4F4F – Use this versatile dark grey as a foundational color for main panels, navigation bars, or large content blocks where a strong, stable presence is desired.

secondary

#36454F – This deep blue-grey works well for secondary backgrounds, card elements, or subtle dividers, adding depth and a cool undertone without overwhelming the primary.

accent

#2F4F4F – Deploy this unique dark teal-grey sparingly for interactive elements like hover states, subtle icons, or progress indicators to introduce a touch of enigmatic character.

background

#36454F – Ideal for a truly dark, immersive background, providing a canvas that makes lighter text and subtle UI elements recede or subtly pop.

text

#808080 – Suitable for secondary or tertiary text on darker backgrounds. For primary text, pair with a near-white like #F5F5F5 to ensure readability across the palette's dark tones.

Accessibility notes

  • Ensure sufficient contrast for all text elements. Primary text (e.g., white or near-white) on #36454F or #4F4F4F is crucial.
  • Use #808080 only for secondary, less critical text or on very dark backgrounds where its subtlety is intended.
  • Avoid using #696969 on #4F4F4F for text; the contrast will be insufficient for most users.
  • Consider providing a toggle for a lighter theme if extensive text content is present, as dark-on-dark can be fatiguing.

Recommended combinations

Urban Depth

For main layouts where a profound, dark atmosphere is key, such as portfolio hero sections or app dashboards.

#36454F · #4F4F4F · #2F4F4F

Subtle Hierarchy

To establish clear visual hierarchy within content blocks, e.g., parent container #4F4F4F, card background #696969, and subtle border/divider #808080.

#4F4F4F · #696969 · #808080

Accentuated Shadow

For interactive components or call-to-action areas, using #696969 as a base, #36454F for buttons, and #2F4F4F for hover states or icon accents.

#696969 · #36454F · #2F4F4F

CSS variables

:root {
  --urban-alley-whisper-1: #4F4F4F;
  --urban-alley-whisper-2: #696969;
  --urban-alley-whisper-3: #808080;
  --urban-alley-whisper-4: #36454F;
  --urban-alley-whisper-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-whisper": {
        1: "#4F4F4F",
        2: "#696969",
        3: "#808080",
        4: "#36454F",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

dark grey color paletteurban aesthetic colorsmonochromatic dark palettesubdued grey hex codescity shadow color scheme

Palette colors

Hex values

Color 1#4F4F4F
·
Color 2#696969
·
Color 3#808080
·
Color 4#36454F
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
1.2:1Fail
1.1:1Fail
2
1.5:1Fail
1.4:1Fail
1.8:1Fail
1.6:1Fail
3
2.1:1Fail
1.4:1Fail
2.5:1Fail
2.3:1Fail
4
1.2:1Fail
1.8:1Fail
2.5:1Fail
1.1:1Fail
5
1.1:1Fail
1.6:1Fail
2.3:1Fail
1.1:1Fail

Similar palettes

More like Urban Alley Whisper

View all monochrome
Foggy London Alley
Shadowed Alley Fog
Urban Shadow Play
Chiaroscuro Night
Monochrome City Fog
Rainy City Reflections