Palette

Urban Alley Grit

Raw and unpolished, capturing the stark, textured reality of city alleys and forgotten corners.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#383838#606060#9B9B9B#C2C2C2#4F5E6B

Palette guide

How to use Urban Alley Grit

Overview

The "Urban Alley Grit" palette captures the raw, unpolished essence of cityscapes, ideal for designs requiring a stark, textured reality. Dominated by deep, moody greys like #383838 and #606060, it perfectly evokes concrete and asphalt. The inclusion of a subtle blue-grey, #4F5E6B, introduces a cool, industrial edge, while lighter tones such as #9B9B9B and #C2C2C2 provide essential contrast and visual texture. This palette is excellent for projects aiming for an authentic, gritty, and modern urban aesthetic, reflecting forgotten corners and industrial strength in digital and print mediums.

Best used for

Industrial-themed web interfaces and apps
Urban fashion branding and e-commerce
Game UI/UX for dystopian or city-survival genres
Architectural design visualizations and portfolios
Music album art and branding for rock/electronic genres
Gritty editorial layouts and photography backdrops

Suggested color roles

primary

#383838 – Use as a dominant background or for strong structural elements in UI, representing the deep shadows and heavy concrete of urban environments.

secondary

#606060 – Ideal for secondary backgrounds, panels, or large text blocks, providing a slightly softer yet still robust base.

accent

#4F5E6B – Deploy sparingly for interactive elements, highlights, or subtle branding accents to introduce a cool, steel-like quality without overpowering the grit.

background

#9B9B9B – A versatile mid-tone grey, excellent for content areas or lighter sections, offering a concrete-like texture.

text

For dark backgrounds like #383838 or #606060, a light text color like #C2C2C2 or even pure white is recommended. For lighter backgrounds such as #9B9B9B or #C2C2C2, #383838 or a deep charcoal ensures readability.

Accessibility notes

Ensure sufficient contrast when pairing #383838 or #606060 with #9B9B9B or #C2C2C2 for text, meeting WCAG AA standards.
Avoid using #9B9B9B text on #C2C2C2 backgrounds for small font sizes due to potentially low contrast.
Reserve #4F5E6B for larger headings or decorative elements if used against similar mid-tones to maintain readability.
Always test color combinations with accessibility tools to confirm adequate contrast ratios for all critical text and interactive elements.

Recommended combinations

Deep Urban

A strong, dark base with bright text and a subtle, cool highlight, perfect for headers or call-to-action buttons.

#383838 · #C2C2C2 · #4F5E6B

Concrete & Steel

A versatile mid-dark theme, where #606060 acts as a background, #9B9B9B for content panels, and #383838 for prominent text or icons.

#606060 · #9B9B9B · #383838

Alley Haze

A lighter, more atmospheric combination suitable for background textures or secondary information, with #606060 for readable text.

#9B9B9B · #C2C2C2 · #606060

CSS variables

:root {
  --urban-alley-grit-2-1: #383838;
  --urban-alley-grit-2-2: #606060;
  --urban-alley-grit-2-3: #9B9B9B;
  --urban-alley-grit-2-4: #C2C2C2;
  --urban-alley-grit-2-5: #4F5E6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-grit-2": {
        1: "#383838",
        2: "#606060",
        3: "#9B9B9B",
        4: "#C2C2C2",
        5: "#4F5E6B",
      }
    }
  }
}

Hex values

Color 1#383838

Color 2#606060

Color 3#9B9B9B

Color 4#C2C2C2

Color 5#4F5E6B

Accessibility

Contrast checker

1.9:1Fail

4.2:1AA18

6.6:1AA

1.8:1Fail

1.9:1Fail

2.3:1Fail

3.5:1AA18

1.1:1Fail

4.2:1AA18

2.3:1Fail

1.6:1Fail

2.4:1Fail

6.6:1AA

3.5:1AA18

1.6:1Fail

3.7:1AA18

1.8:1Fail

1.1:1Fail

2.4:1Fail

3.7:1AA18

Similar palettes

More like Urban Alley Grit

View all dark

Distressed Concrete Grit

Urban Grime Chic

Corroded Metal Grit

Rusty Industrial Grids

Rusty Metal Grid

Rusty Steel Core