Back to palettes

Palette

City Grunge Texture

A raw and unpolished blend of dark greys and muted tones, reflecting distressed city textures.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#6B7B7B#8C9C9C#A7B0B0#3E3E3E

Palette guide

How to use City Grunge Texture

Overview

The City Grunge Texture palette offers a raw and unpolished blend of dark greys and muted tones, reflecting distressed city textures and weathered surfaces. Ranging from the deep, anchoring #3E3E3E and the solid #4F4F4F, through the desaturated #6B7B7B and #8C9C9C, to the lighter, almost faded #A7B0B0, this collection provides a robust and authentic aesthetic. It's an excellent choice for designers seeking a rugged, industrial, or vintage urban feel. This palette conveys a sense of history, resilience, and understated cool, perfect for projects that embrace imperfection and a strong, character-filled visual identity.

Best used for

  • Streetwear and urban fashion brands
  • Vintage-inspired graphic design
  • Art and music event promotion
  • Industrial interior design concepts
  • Gritty photography showcases
  • Adventure and outdoor gear branding

Suggested color roles

primary

Use #3E3E3E as a strong primary for backgrounds or structural elements, providing a deep, textured foundation for your design.

secondary

Employ #4F4F4F for secondary content areas, navigation, or large typography, offering a robust yet muted presence.

accent

Apply #6B7B7B for subtle accents, borders, or interactive states where a desaturated mid-tone provides gentle emphasis.

background

Utilize #A7B0B0 as a lighter background for main content areas, ensuring good readability for darker text while maintaining the grunge feel.

text

For text on darker backgrounds, use #A7B0B0 or a crisp white. For lighter backgrounds, #3E3E3E or a deep charcoal offers optimal contrast and readability.

Accessibility notes

  • Ensure sufficient contrast when pairing light grays like #8C9C9C or #A7B0B0 with lighter text; always use dark text.
  • Avoid using #6B7B7B for small text on backgrounds of similar luminance to maintain readability.
  • The darkest shades, #3E3E3E and #4F4F4F, provide excellent contrast for white or light grey text.
  • Check contrast ratios for all text and interactive elements, especially when using mid-range grays to ensure WCAG AA compliance.

Recommended combinations

Distressed Base

Creates a strong, raw base, excellent for dark mode interfaces or bold headlines with light text, conveying a worn feel.

#3E3E3E · #4F4F4F · #A7B0B0

Weathered Layers

Ideal for subtle gradients or layered effects that add depth and a tactile, weathered texture to designs.

#4F4F4F · #6B7B7B · #8C9C9C

Urban Fade

Provides a faded, authentic look suitable for main content areas, allowing for clear hierarchy and readability with a strong anchor.

#A7B0B0 · #8C9C9C · #3E3E3E

CSS variables

:root {
  --city-grunge-texture-1: #4F4F4F;
  --city-grunge-texture-2: #6B7B7B;
  --city-grunge-texture-3: #8C9C9C;
  --city-grunge-texture-4: #A7B0B0;
  --city-grunge-texture-5: #3E3E3E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-grunge-texture": {
        1: "#4F4F4F",
        2: "#6B7B7B",
        3: "#8C9C9C",
        4: "#A7B0B0",
        5: "#3E3E3E",
      }
    }
  }
}

Related searches

grunge grey color paletteurban texture colorsdistressed dark aestheticindustrial grey schememuted earth tones urban

Palette colors

Hex values

Color 1#4F4F4F
·
Color 2#6B7B7B
·
Color 3#8C9C9C
·
Color 4#A7B0B0
·
Color 5#3E3E3E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.9:1Fail
3.7:1AA18
1.3:1Fail
2
1.9:1Fail
1.5:1Fail
2:1Fail
2.4:1Fail
3
2.9:1Fail
1.5:1Fail
1.3:1Fail
3.7:1AA18
4
3.7:1AA18
2:1Fail
1.3:1Fail
4.8:1AA
5
1.3:1Fail
2.4:1Fail
3.7:1AA18
4.8:1AA

Similar palettes

More like City Grunge Texture

View all dark
Moody Urban Graphite
Smokestack Iron Grind
Urban Grunge Soul
Acid Rain Gloom
Basalt Edge
Charcoal Depths