Back to palettes

Palette

Gritty Urban Mural

A textured gradient of industrial grays, mirroring the weathered concrete and painted walls of a city mural.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gritty Urban Mural 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 Gritty Urban Mural.

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

Data visualization

#4A4A4A#6B6B6B#8C8C8C#ACACAC#CFCFCF

Palette guide

How to use Gritty Urban Mural

Overview

The Gritty Urban Mural palette offers a textured gradient of industrial grays, mirroring the weathered concrete and painted walls of a city mural. This monochrome collection, ranging from deep #4A4A4A to a bright #CFCFCF, including #6B6B6B, #8C8C8C, and #ACACAC, provides designers and developers with a versatile toolkit for creating modern, raw, and authentic designs. Its subtle shifts in tone allow for excellent depth and visual interest without relying on color, making it perfect for projects that aim to evoke an urban, grunge, or street art aesthetic with sophistication and restraint.

Best used for

  • Streetwear or urban fashion brands
  • Grunge-style website interfaces
  • Art and photography portfolios
  • Modern architectural renders
  • Dark mode UI themes with depth
  • Digital art and illustration with a raw feel

Suggested color roles

primary

Use #4A4A4A as a strong, grounding color for main sections or prominent text, providing a solid base.

secondary

Employ #6B6B6B for subheadings, secondary content blocks, or borders, offering a slightly softer contrast.

accent

Leverage #CFCFCF as a bright accent for highlights, interactive elements, or clean, readable text on dark backgrounds.

background

A mid-tone like #ACACAC can serve as a clean, textured background, or #4A4A4A for a darker, immersive feel.

text

For dark backgrounds, #CFCFCF or white provides excellent readability. For lighter backgrounds, #4A4A4A is ideal for text.

Accessibility notes

  • Ensure sufficient contrast between #4A4A4A text and lighter backgrounds like #ACACAC or #CFCFCF for WCAG AA compliance.
  • Avoid using #6B6B6B text on #8C8C8C backgrounds, as the contrast might be insufficient for readability.
  • The lightest color, #CFCFCF, offers excellent contrast for text when paired with any of the darker grays.
  • Test all interactive elements to ensure clear visual feedback for states like hover, focus, and active.

Recommended combinations

Urban Depth

Ideal for creating layered UI elements or content cards, with #CFCFCF as bright, readable text.

#4A4A4A · #6B6B6B · #CFCFCF

Mural Layers

Excellent for subtle background textures or section separators, mimicking weathered concrete.

#6B6B6B · #8C8C8C · #ACACAC

Street Art Contrast

Perfect for a strong header, where #CFCFCF text pops against #4A4A4A, with #8C8C8C for secondary details.

#4A4A4A · #CFCFCF · #8C8C8C

CSS variables

:root {
  --gritty-urban-mural-1: #4A4A4A;
  --gritty-urban-mural-2: #6B6B6B;
  --gritty-urban-mural-3: #8C8C8C;
  --gritty-urban-mural-4: #ACACAC;
  --gritty-urban-mural-5: #CFCFCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gritty-urban-mural": {
        1: "#4A4A4A",
        2: "#6B6B6B",
        3: "#8C8C8C",
        4: "#ACACAC",
        5: "#CFCFCF",
      }
    }
  }
}

Related searches

urban grey color palettegrunge monochrome designstreet art inspired colorstextured grey UI kitraw concrete aesthetic

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#6B6B6B
·
Color 3#8C8C8C
·
Color 4#ACACAC
·
Color 5#CFCFCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
3.9:1AA18
5.7:1AA
2
1.7:1Fail
1.6:1Fail
2.3:1Fail
3.4:1AA18
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
3.9:1AA18
2.3:1Fail
1.5:1Fail
1.5:1Fail
5
5.7:1AA
3.4:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Gritty Urban Mural

View all monochrome