Back to palettes

Palette

Distressed Concrete Grit

Gritty grays with a surprising accent of distressed red, capturing the raw, textured feel of city decay.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Distressed Concrete 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 Distressed Concrete Grit.

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

Data visualization

#2F2F2F#4C4C4C#6B6B6B#9B9B9B#D03B3B

Palette guide

How to use Distressed Concrete Grit

Overview

The "Distressed Concrete Grit" palette embodies the raw, textured feel of city decay, combining a range of gritty greys with a surprising accent of distressed red. This robust collection features a dark charcoal #2F2F2F, a deep grey #4C4C4C, a medium grey #6B6B6B, and a lighter grey #9B9B9B. The vibrant, almost rusty red #D03B3B serves as a powerful focal point, reminiscent of faded warning signs or weathered brick. Designers can leverage these hues to create authentic and edgy experiences, perfect for branding, digital interfaces, or print materials that aim to convey an industrial, urban, or even post-apocalyptic vibe. It’s ideal for projects seeking a strong, impactful aesthetic.

Best used for

  • Urban exploration or industrial photography websites
  • Branding for alternative music bands or venues
  • UI/UX for gritty video games or dark-themed apps
  • Packaging for robust tools or outdoor gear
  • Graphic design for posters with a grunge aesthetic
  • Interior design for modern industrial spaces

Suggested color roles

primary

A deep, solid grey #4C4C4C that provides a strong, stable foundation. Ideal for main sections, large blocks, or key structural elements.

secondary

A vibrant, distressed red #D03B3B that acts as a powerful accent. Excellent for calls-to-action, warnings, or key brand highlights to draw attention.

accent

A versatile medium grey #6B6B6B that offers subtle contrast and depth. Perfect for secondary elements, borders, or subtle background textures.

background

A very dark charcoal #2F2F2F that provides a deep, moody, and sophisticated backdrop, allowing the lighter greys and red to stand out dramatically.

text

A light, clear grey #9B9B9B that ensures good readability against the dark backgrounds like #2F2F2F or #4C4C4C, providing a clean and legible text color.

Accessibility notes

  • #9B9B9B (light grey) text on #2F2F2F (dark charcoal) or #4C4C4C (deep grey) provides good contrast for body text.
  • #D03B3B (red) text on #9B9B9B (light grey) should provide good contrast for headings, but verify for smaller body text.
  • Avoid using #6B6B6B (medium grey) text on #9B9B9B (light grey) due to low contrast.
  • Ensure interactive elements have clear visual states, especially when distinguishing between various shades of grey.

Recommended combinations

Industrial Edge

Bold branding, website headers, or UI elements for a stark, impactful industrial aesthetic.

#2F2F2F · #4C4C4C · #D03B3B

Textured Grit

Backgrounds, subtle patterns, or architectural renderings where depth and texture are desired.

#6B6B6B · #9B9B9B · #4C4C4C

Warning Pop

Highlight urgent information, call-outs, or graphic elements where the red needs to stand out against a neutral base.

#D03B3B · #4C4C4C · #9B9B9B

CSS variables

:root {
  --distressed-concrete-grit-1: #2F2F2F;
  --distressed-concrete-grit-2: #4C4C4C;
  --distressed-concrete-grit-3: #6B6B6B;
  --distressed-concrete-grit-4: #9B9B9B;
  --distressed-concrete-grit-5: #D03B3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "distressed-concrete-grit": {
        1: "#2F2F2F",
        2: "#4C4C4C",
        3: "#6B6B6B",
        4: "#9B9B9B",
        5: "#D03B3B",
      }
    }
  }
}

Related searches

urban industrial palettegrunge concrete reddark city decay colorsdistressed grey red designgritty modern aesthetic

Palette colors

Hex values

Color 1#2F2F2F
·
Color 2#4C4C4C
·
Color 3#6B6B6B
·
Color 4#9B9B9B
·
Color 5#D03B3B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
4.8:1AA
2.8:1Fail
2
1.6:1Fail
1.6:1Fail
3.1:1AA18
1.8:1Fail
3
2.5:1Fail
1.6:1Fail
1.9:1Fail
1.1:1Fail
4
4.8:1AA
3.1:1AA18
1.9:1Fail
1.7:1Fail
5
2.8:1Fail
1.8:1Fail
1.1:1Fail
1.7:1Fail

Similar palettes

More like Distressed Concrete Grit

View all dark
Urban Grime Chic
Smokestack Iron Grind
Urban Grunge Alley
Urban Grunge Texture
Corroded Metal Grit
Industrial Ember Glow