Palette

Distressed Alley Art

Combines raw concrete greys with a unexpected pop of distressed yellow, reflecting the art and grit of an urban alley.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Distressed Alley Art 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 Alley Art.

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

Data visualization

#5A5A5A#8F8F8F#C1C1C1#E5B200#2D2D2D

Palette guide

How to use Distressed Alley Art

Overview

The "Distressed Alley Art" palette captures the raw, textured feel of an urban alley, blending various concrete greys with an unexpected, bold pop of distressed yellow. This gritty collection features a dark charcoal #2D2D2D, a medium grey #5A5A5A, a lighter grey #8F8F8F, and a very light grey #C1C1C1. The vibrant, mustard-like yellow #E5B200 serves as a striking accent, reminiscent of street art or worn signage. Designers can leverage these hues to create authentic and edgy experiences, perfect for branding, digital interfaces, or print materials that aim to convey an urban, industrial, or artistic vibe. It’s ideal for projects seeking a raw, contemporary aesthetic.

Best used for

Urban streetwear branding or e-commerce
Website design for art galleries or creative agencies
UI/UX for edgy mobile apps or music platforms
Packaging for craft beer or artisanal goods
Graphic novels or comic book illustrations
Event promotions for underground art shows

Suggested color roles

primary

A balanced medium grey #5A5A5A that provides a strong, neutral foundation. Ideal for main sections, backgrounds, or key structural elements.

secondary

A bold, distressed yellow #E5B200 that acts as a powerful focal point. Excellent for calls-to-action, highlights, or key brand accents to add energy.

accent

A lighter grey #8F8F8F that offers subtle contrast and texture. Perfect for secondary elements, borders, or subtle background patterns.

background

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

text

A light, clear grey #C1C1C1 that ensures good readability against the dark backgrounds like #2D2D2D or #5A5A5A, providing a clean text color.

Accessibility notes

#C1C1C1 (light grey) text on #2D2D2D (dark charcoal) or #5A5A5A (medium grey) provides good contrast for body text.
#E5B200 (yellow) text on #C1C1C1 (light grey) will have insufficient contrast; reserve yellow for larger display text or accents on darker backgrounds.
Avoid using #8F8F8F (lighter grey) text on #C1C1C1 (very light grey) due to low contrast.
Ensure interactive elements have clear visual states, especially when distinguishing between various shades of grey.

Recommended combinations

Urban Grime

Bold branding, website headers, or UI elements for an edgy, industrial aesthetic.

#2D2D2D · #5A5A5A · #E5B200

Subtle Texture

Backgrounds, subtle patterns, or architectural visualizations where depth is desired.

#8F8F8F · #C1C1C1 · #5A5A5A

Artistic Pop

Highlight features, call-outs, or graphic elements where the yellow needs to stand out against a neutral base.

#E5B200 · #5A5A5A · #C1C1C1

CSS variables

:root {
  --distressed-alley-art-1: #5A5A5A;
  --distressed-alley-art-2: #8F8F8F;
  --distressed-alley-art-3: #C1C1C1;
  --distressed-alley-art-4: #E5B200;
  --distressed-alley-art-5: #2D2D2D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "distressed-alley-art": {
        1: "#5A5A5A",
        2: "#8F8F8F",
        3: "#C1C1C1",
        4: "#E5B200",
        5: "#2D2D2D",
      }
    }
  }
}

Hex values

Color 1#5A5A5A

Color 2#8F8F8F

Color 3#C1C1C1

Color 4#E5B200

Color 5#2D2D2D

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

3.5:1AA18

2:1Fail

2.1:1Fail

1.8:1Fail

1.6:1Fail

4.3:1AA18

3.8:1AA18

1.8:1Fail

1.1:1Fail

7.7:1AAA

3.5:1AA18

1.6:1Fail

1.1:1Fail

7:1AAA

2:1Fail

4.3:1AA18

7.7:1AAA

7:1AAA

Similar palettes

More like Distressed Alley Art

Aged Herbarium Scroll

Aged Indigo Fabric

Aged Leather Patina