Palette

Urban Grunge Alley

The gritty reality of an urban back alley, with distressed textures and worn surfaces.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#495057#212529#CB2027#4E7F7F#DEE2E6

Palette guide

How to use Urban Grunge Alley

Overview

The Urban Grunge Alley palette captures the raw, industrial essence of city backstreets. Dominated by deep, moody tones, it features a stark charcoal base of #212529 complemented by the versatile medium gray #495057. A striking, rebellious red, #CB2027, injects a crucial element of urgency or warning, while the muted, almost dusty teal of #4E7F7F offers an unexpected, weathered sophistication. The palette is grounded by #DEE2E6, a near-white that provides essential contrast and highlights. Ideal for projects demanding a bold, unpolished, and authentic aesthetic, this guide helps designers and developers leverage its unique character.

Best used for

Streetwear brand identity and web design
Video game environments or UI for gritty themes
Music album art or concert promotional materials
Industrial or mechanical product interfaces
Dark mode UI/UX applications
Photography portfolio websites with a raw aesthetic

Suggested color roles

primary

#212529 - The foundational deep charcoal, perfect for large backgrounds, primary containers, or a dominant branding color, establishing a strong, serious tone.

secondary

#495057 - A versatile medium gray, excellent for sub-headers, secondary panels, or backgrounds where a slightly lighter, less intense dark is preferred, offering depth without starkness.

accent

#CB2027 - A powerful, rebellious red ideal for calls to action, warning messages, interactive elements, or dramatic highlights that demand immediate attention and convey urgency.

background

#DEE2E6 - A clean, off-white that serves as a high-contrast background for lighter layouts, or for cards and content blocks within a dark theme, ensuring readability.

text

#DEE2E6 for headlines and body text against dark backgrounds like #212529 or #495057. For lighter backgrounds like #DEE2E6, use #212529 or a dark charcoal for optimal readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #495057 for text on #DEE2E6 or vice versa; use a contrast checker.
The vibrant #CB2027 accent should be used sparingly for critical interactive elements to avoid visual fatigue and maintain its impact.
Consider larger font sizes or bolder weights when using #4E7F7F for text, as its muted tone can reduce readability against mid-range backgrounds.
Avoid relying solely on color differences between #CB2027 and #4E7F7F for conveying information, as these hues might pose challenges for some forms of color blindness.

Recommended combinations

Gritty Foundation

Ideal for high-contrast interfaces where #212529 is the dominant background, #DEE2E6 provides clean, readable text, and #CB2027 highlights critical calls to action.

#212529 · #DEE2E6 · #CB2027

Muted Industrial

Perfect for creating a softer, more weathered industrial feel; #495057 as a background, #DEE2E6 for content, and #4E7F7F for subtle accent elements or iconography.

#495057 · #4E7F7F · #DEE2E6

Urban Edge

Use #212529 as a deep background, #4E7F7F for secondary information or decorative elements, and #CB2027 to provide a sharp, impactful focal point.

#212529 · #4E7F7F · #CB2027

CSS variables

:root {
  --urban-grunge-alley-1: #495057;
  --urban-grunge-alley-2: #212529;
  --urban-grunge-alley-3: #CB2027;
  --urban-grunge-alley-4: #4E7F7F;
  --urban-grunge-alley-5: #DEE2E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-alley": {
        1: "#495057",
        2: "#212529",
        3: "#CB2027",
        4: "#4E7F7F",
        5: "#DEE2E6",
      }
    }
  }
}

Hex values

Color 1#495057

Color 2#212529

Color 3#CB2027

Color 4#4E7F7F

Color 5#DEE2E6

Accessibility

Contrast checker

1.9:1Fail

1.5:1Fail

1.8:1Fail

6.3:1AA

1.9:1Fail

2.8:1Fail

3.4:1AA18

11.8:1AAA

1.5:1Fail

2.8:1Fail

1.2:1Fail

4.3:1AA18

1.8:1Fail

3.4:1AA18

1.2:1Fail

3.5:1AA18

6.3:1AA

11.8:1AAA

4.3:1AA18

3.5:1AA18

Similar palettes

More like Urban Grunge Alley

View all dark

Distressed Concrete Grit

Smokestack Iron Grind

Urban Grime Chic

Corroded Metal Grit

Industrial Ember Glow

Industrial Grid Noir