Back to palettes

Palette

Urban Grunge Texture

A gritty monochrome of dark greys, reflecting the raw textures and shadows of industrial urban spaces.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#36454F#696969#A9A9A9#D3D3D3

Palette guide

How to use Urban Grunge Texture

Overview

The Urban Grunge Texture palette offers a sophisticated, gritty monochrome aesthetic perfect for projects demanding a raw, industrial edge. Anchored by the near-black #1A1A1A and deep charcoal #36454F, it builds a foundation of depth and shadow. Mid-tones like #696969 provide crucial contrast, while lighter greys #A9A9A9 and #D3D3D3 ensure readability and highlight opportunities. This guide helps designers and developers leverage these shades to evoke concrete textures, urban decay, and modern minimalism, creating impactful, mood-driven interfaces and branding. It’s ideal for conveying strength, authenticity, and an unpolished sophistication.

Best used for

  • Gritty, industrial-themed websites or apps
  • Branding for urban fashion or streetwear
  • Dark mode UI/UX designs
  • Photography portfolios showcasing architectural or street photography
  • Event promotions for underground music or art scenes
  • Video game interfaces with a dystopian or realistic setting

Suggested color roles

primary

#1A1A1A. Best as a dominant background or main container color, establishing a profound, dark foundation.

secondary

#36454F. Ideal for complementary backgrounds, secondary sections, or larger elements that need to recede slightly from the primary dark.

accent

#696969. Use for subtle highlights, borders, dividers, or interactive states where a clear but not overwhelming distinction is needed.

background

#1A1A1A or #36454F. Choose for dark, immersive backgrounds, providing a stark canvas for lighter elements.

text

#D3D3D3. Essential for primary body text on dark backgrounds like #1A1A1A or #36454F to ensure optimal readability. Use #A9A9A9 for secondary text or captions.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter greys like #A9A9A9 or #D3D3D3 with dark backgrounds such as #1A1A1A or #36454F, aiming for WCAG AA or AAA compliance.
  • Avoid using #696969 for small text on #36454F or #A9A9A9 backgrounds, as contrast may be insufficient.
  • Consider larger font sizes or increased line height for text using #A9A9A9 on darker tones to aid readability.
  • Provide alternative text for any visual information conveyed solely by subtle color differences, especially between adjacent mid-tones.

Recommended combinations

Deep Contrast

Perfect for high-impact headers and body text on a very dark background, ensuring maximum readability and a strong, modern feel.

#1A1A1A · #D3D3D3 · #A9A9A9

Subtle Layering

Excellent for card backgrounds, secondary content blocks, or subtle UI elements where depth and texture are desired without stark contrast.

#36454F · #696969 · #A9A9A9

Gritty Accents

Ideal for dark backgrounds with mid-grey accents (buttons, borders) and very light text, creating a balanced yet edgy interface.

#1A1A1A · #696969 · #D3D3D3

CSS variables

:root {
  --urban-grunge-texture-1: #1A1A1A;
  --urban-grunge-texture-2: #36454F;
  --urban-grunge-texture-3: #696969;
  --urban-grunge-texture-4: #A9A9A9;
  --urban-grunge-texture-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-texture": {
        1: "#1A1A1A",
        2: "#36454F",
        3: "#696969",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

dark grunge color schemeindustrial grey paletteurban aesthetic colorsconcrete texture hex codesmonochrome dark ui colors

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#36454F
·
Color 3#696969
·
Color 4#A9A9A9
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.2:1AA18
7.4:1AAA
11.6:1AAA
2
1.8:1Fail
1.8:1Fail
4.2:1AA18
6.6:1AA
3
3.2:1AA18
1.8:1Fail
2.3:1Fail
3.7:1AA18
4
7.4:1AAA
4.2:1AA18
2.3:1Fail
1.6:1Fail
5
11.6:1AAA
6.6:1AA
3.7:1AA18
1.6:1Fail

Similar palettes

More like Urban Grunge Texture

View all dark
Distressed Concrete Grit
Urban Grime Chic
Smokestack Iron Grind
Urban Grunge Alley
City Grunge Texture
City Neon Rain