Back to palettes

Palette

Urban Alley

Gritty, cool greys evoke the concrete and shadows of a dimly lit, atmospheric urban alleyway.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#595B5B#7C7E7F#A9AEAE#424444#6D6F70

Palette guide

How to use Urban Alley

Overview

The Urban Alley palette offers a sophisticated range of cool greys, ideal for projects demanding a gritty, modern, or industrial aesthetic. With its deep tones like #424444 and #595B5B, balanced by lighter shades such as #7C7E7F and #A9AEAE, this palette provides depth and versatility for UI/UX designers and brand strategists. The almost monochromatic nature creates a cohesive, moody atmosphere, perfect for conveying seriousness, technology, or urban sophistication. Developers can leverage these hex codes, including #6D6F70, to build visually consistent interfaces that feel grounded and contemporary without relying on stark black and white. It's excellent for creating a strong, understated visual identity.

Best used for

  • Tech company interfaces or websites
  • Industrial design concepts and branding
  • Architectural portfolio presentations
  • Noir-themed game environments or UI
  • Modern menswear branding
  • Automotive interior design mockups

Suggested color roles

primary

#424444 - Use this deep, dark grey as the foundational color for main elements, large text, or dominant UI components to establish a strong, grounded presence.

secondary

#595B5B - A slightly lighter, yet still robust grey, perfect for supporting elements, secondary buttons, or large content blocks to add subtle variation.

accent

#A9AEAE - This light, airy grey serves as an excellent, subtle accent for highlights, thin borders, inactive states, or small interactive elements, providing a touch of contrast without feeling jarring.

background

#6D6F70 - A versatile mid-tone grey that works well for page backgrounds, card elements, or containers, offering a comfortable base that allows other palette colors to stand out.

text

#7C7E7F - Ideal for secondary text, metadata, or captions when placed on darker backgrounds from this palette. For primary body text on a lighter background, a near-black like #424444 or pure white on very dark backgrounds is recommended for optimal readability.

Accessibility notes

  • Ensure sufficient contrast when using #7C7E7F text on backgrounds like #6D6F70 or #A9AEAE; it may fail WCAG AA standards.
  • For critical text, pair the darkest color #424444 with the lightest #A9AEAE for maximum readability and accessibility.
  • Avoid using mid-tone greys like #6D6F70 for small text on similarly toned backgrounds to prevent eye strain.
  • Always test color combinations with accessibility tools, especially for interactive elements and form fields, to ensure compliance.

Recommended combinations

Urban Contrast

Ideal for high-contrast headlines and body text on a dark background, or for distinguishing active elements and key information.

#424444 · #A9AEAE · #7C7E7F

Subtle Depth

Great for creating layered UI elements, card backgrounds with darker text, or subtle depth in data visualizations and dashboards.

#6D6F70 · #595B5B · #424444

Alley Haze

Suited for softer, less dominant sections, secondary navigation, or backgrounds where a lighter, atmospheric feel is desired without high contrast.

#7C7E7F · #595B5B · #A9AEAE

CSS variables

:root {
  --urban-alley-1: #595B5B;
  --urban-alley-2: #7C7E7F;
  --urban-alley-3: #A9AEAE;
  --urban-alley-4: #424444;
  --urban-alley-5: #6D6F70;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley": {
        1: "#595B5B",
        2: "#7C7E7F",
        3: "#A9AEAE",
        4: "#424444",
        5: "#6D6F70",
      }
    }
  }
}

Related searches

moody grey color schemeindustrial color palette hex codesmodern dark grey brandingurban aesthetic color guidecool grey UI design

Palette colors

Hex values

Color 1#595B5B
·
Color 2#7C7E7F
·
Color 3#A9AEAE
·
Color 4#424444
·
Color 5#6D6F70
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1AA18
1.4:1Fail
1.4:1Fail
2
1.7:1Fail
1.8:1Fail
2.4:1Fail
1.2:1Fail
3
3:1AA18
1.8:1Fail
4.4:1AA18
2.2:1Fail
4
1.4:1Fail
2.4:1Fail
4.4:1AA18
1.9:1Fail
5
1.4:1Fail
1.2:1Fail
2.2:1Fail
1.9:1Fail

Similar palettes

More like Urban Alley

View all dark
Charcoal Depths
Urban Industrial Grit
Acid Rain Gloom
Basalt Edge
City Grunge Texture
City Night Canvas