Back to palettes

Palette

Urban Alley Grit

Rough, muted greys and steely blues, reflecting the raw, honest texture of a city alleyway.

neutraldark5 colors
More neutral 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

#36454F#5A5A5A#808080#B0C4DE#A9A9A9

Palette guide

How to use Urban Alley Grit

Overview

The Urban Alley Grit palette captures the raw, unpolished essence of cityscapes, offering a sophisticated range of muted greys and a striking steel blue. Anchored by the deep charcoal `#36454F` and balanced mid-greys like `#5A5A5A` and `#A9A9A9`, this collection brings an industrial, concrete aesthetic to life. The light steel blue, `#B0C4DE`, serves as a cool, refreshing counterpoint, adding depth and preventing the palette from feeling monochrome. Designers and developers can leverage this palette to create robust, modern, and minimalist interfaces that evoke strength, urban sophistication, and a sense of grounded realism, perfect for projects requiring a raw yet refined visual identity.

Best used for

  • Industrial design portfolios and websites
  • Modern architectural firm branding
  • Dark mode UI themes for tech applications
  • Automotive or machinery brand identity
  • Apparel brands with a streetwear or utilitarian aesthetic
  • Photography portfolios focusing on urban landscapes

Suggested color roles

primary

Use `#36454F` for dominant elements such as main headers, navigation bars, or large background sections to establish a strong, grounded presence.

secondary

Employ `#5A5A5A` for secondary content areas, card backgrounds, or subtle dividing lines, providing a balanced, sophisticated mid-tone.

accent

Reserve `#B0C4DE` for interactive elements, calls to action, progress indicators, or small graphic details to provide a distinct, cool highlight.

background

Apply `#808080` for a versatile, slightly lighter background that offers depth, or use `#36454F` for a dramatic, immersive dark theme base.

text

For dark backgrounds, use `#B0C4DE` for headlines or pure white for body text. Against lighter greys like `#A9A9A9`, a dark charcoal like `#36454F` provides excellent readability.

Accessibility notes

  • Ensure sufficient contrast when using `#5A5A5A` or `#808080` for text against lighter backgrounds; aim for a minimum WCAG AA rating.
  • Pair `#B0C4DE` (Light Steel Blue) with darker greys like `#36454F` for accent text or icons to maintain readability.
  • Avoid placing light text directly on `#A9A9A9` (Dark Gray) without checking contrast; a near-white or pure white text is safer.
  • When using dark backgrounds like `#36454F`, ensure primary text is a very light grey or white for optimal legibility.

Recommended combinations

Concrete Horizon

Ideal for a strong header or hero section; `#36454F` as background, `#B0C4DE` for key text, and `#A9A9A9` for subtext.

#36454F · #B0C4DE · #A9A9A9

Steel Grid

Effective for card components or information panels; `#5A5A5A` as base, `#808080` for borders, and `#B0C4DE` for interactive elements.

#5A5A5A · #808080 · #B0C4DE

Urban Depth

Creates a sophisticated dark mode interface; `#36454F` for background, `#5A5A5A` for content blocks, and `#B0C4DE` for highlights.

#36454F · #5A5A5A · #B0C4DE

CSS variables

:root {
  --urban-alley-grit-1: #36454F;
  --urban-alley-grit-2: #5A5A5A;
  --urban-alley-grit-3: #808080;
  --urban-alley-grit-4: #B0C4DE;
  --urban-alley-grit-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-grit": {
        1: "#36454F",
        2: "#5A5A5A",
        3: "#808080",
        4: "#B0C4DE",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

industrial color schemesgrey and blue color palettedark urban aesthetic colorsconcrete texture color palettemasculine web design colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A5A5A
·
Color 3#808080
·
Color 4#B0C4DE
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
5.6:1AA
4.2:1AA18
2
1.4:1Fail
1.7:1Fail
3.9:1AA18
2.9:1Fail
3
2.5:1Fail
1.7:1Fail
2.2:1Fail
1.7:1Fail
4
5.6:1AA
3.9:1AA18
2.2:1Fail
1.3:1Fail
5
4.2:1AA18
2.9:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Urban Alley Grit

View all neutral
Urban Canyon Rust
Urban Grime Blues
Steel Rust Patina
Urban Grunge
Urban Rain Reflection
Volcanic Ash Bloom