Palette

Grunge Alley Art

Gritty grays with bold pops of red and yellow, capturing raw street art energy.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#4F4F4F#808080#B22222#FFD700

Palette guide

How to use Grunge Alley Art

Overview

The Grunge Alley Art palette combines gritty grays with bold pops of red and yellow, capturing raw street art energy. It features a dark slate gray #36454F, a charcoal gray #4F4F4F, a medium gray #808080, a powerful deep red #B22222, and a striking gold #FFD700. This palette is an excellent choice for designers and developers aiming to create edgy, urban, or rebellious designs. Its strong contrasts and industrial feel make it perfect for projects that require a bold statement, from brand identities to digital interfaces, resonating with a raw, energetic mood.

Best used for

Urban fashion branding
Music and band promotions
Rebellious marketing campaigns
Gaming UI/UX design
Industrial design concepts
Streetwear website designs

Suggested color roles

primary

Use #36454F (Dark Slate Gray) as a strong, industrial base, ideal for backgrounds or primary structural elements.

secondary

Employ #808080 (Medium Gray) for supporting content, navigation, or to provide a neutral balance.

accent

Apply #B22222 (Deep Red) as a powerful, raw accent for calls-to-action, alerts, or to inject intense energy.

background

Utilize #4F4F4F (Charcoal Gray) as a versatile, moody canvas that allows the brighter accents to truly pop.

text

For text, #FFD700 (Gold) provides vibrant contrast for headlines on dark backgrounds. White or a very light gray is excellent for body text on any of the dark grays.

Accessibility notes

Ensure #FFD700 (Gold) text has sufficient contrast against #36454F or #4F4F4F backgrounds to meet accessibility standards.
White or light gray text on #36454F, #4F4F4F, or #808080 will provide optimal readability.
Avoid using #B22222 (Deep Red) for small body text on dark backgrounds, as its intensity can sometimes reduce legibility.
When using #808080 (Medium Gray) as a background, ensure text is significantly darker or lighter for good contrast.

Recommended combinations

Urban Grit

Creates a strong, industrial foundation with a powerful, energetic accent, great for bold statements.

#36454F · #4F4F4F · #B22222

Street Pop

A dynamic combination that delivers striking highlights against a neutral base, perfect for attention-grabbing elements.

#808080 · #B22222 · #FFD700

Edgy Contrast

Maximizes visual impact, ideal for hero sections, logos, or any design needing high-contrast drama.

#36454F · #FFD700 · #B22222

CSS variables

:root {
  --grunge-alley-art-1: #36454F;
  --grunge-alley-art-2: #4F4F4F;
  --grunge-alley-art-3: #808080;
  --grunge-alley-art-4: #B22222;
  --grunge-alley-art-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grunge-alley-art": {
        1: "#36454F",
        2: "#4F4F4F",
        3: "#808080",
        4: "#B22222",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#4F4F4F

Color 3#808080

Color 4#B22222

Color 5#FFD700

Accessibility

Contrast checker

1.2:1Fail

2.5:1Fail

1.5:1Fail

7.1:1AAA

1.2:1Fail

2.1:1Fail

1.2:1Fail

5.8:1AA

2.5:1Fail

2.1:1Fail

1.7:1Fail

2.8:1Fail

1.5:1Fail

1.2:1Fail

1.7:1Fail

4.8:1AA

7.1:1AAA

5.8:1AA

2.8:1Fail

4.8:1AA

Similar palettes

More like Grunge Alley Art

Grunge Alley Art

See it in context.

Ready when you are.

Built with Grunge Alley Art.

How to use Grunge Alley Art

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Urban Grit

Street Pop

Edgy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Grunge Alley Art