Palette

Urban Grunge Wall

A raw, gritty palette inspired by weathered concrete, graffiti-laden walls, and city textures.

NeutralMinimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Grunge Wall 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 Urban Grunge Wall.

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

Data visualization

#4A4A4A#7A7A7A#AFAFAF#D9D9D9#2E2E2E

Palette guide

How to use Urban Grunge Wall

Overview

The "Urban Grunge Wall" palette embodies a raw, industrial aesthetic, perfect for designs seeking a sophisticated yet edgy feel. Anchored by deep tones like #2E2E2E and #4A4A4A, it evokes weathered concrete and city textures. Lighter shades such as #7A7A7A, #AFAFAF, and #D9D9D9 provide essential contrast and breathability, preventing the design from feeling too heavy. This versatile neutral collection is ideal for creating minimalist interfaces, robust branding, or atmospheric digital environments. Developers will appreciate its straightforward application across UI elements, ensuring a cohesive and modern look. Designers can leverage its inherent moodiness for impactful visual storytelling.

Best used for

Industrial-themed website interfaces
Modern architectural portfolio designs
Gritty video game UI/UX
Branding for urban streetwear or artisan workshops
Minimalist app designs with a strong character
Photography backdrop or gallery presentations

Suggested color roles

primary

#4A4A4A - A solid, dependable dark grey, excellent for main sections, large text blocks, or primary interactive elements.

secondary

#7A7A7A - A balanced medium grey, ideal for subheadings, secondary navigation, or dividing lines, offering a softer presence than the primary.

accent

#AFAFAF - A subtle, desaturated light grey that can highlight specific UI components without overwhelming, or provide a muted background for important information.

background

#D9D9D9 - A very light grey, providing a clean, airy canvas that allows darker elements to stand out, perfect for main page backgrounds.

text

#2E2E2E - A deep, near-black for primary body text, ensuring high readability against lighter backgrounds like #D9D9D9 or #AFAFAF.

Accessibility notes

Ensure #2E2E2E text has sufficient contrast against #D9D9D9 and #AFAFAF backgrounds (WCAG AA/AAA).
Avoid placing #7A7A7A text directly on #4A4A4A backgrounds without checking contrast ratios, especially for small font sizes.
Use #D9D9D9 as a background for larger text elements in #2E2E2E for optimal readability.
For interactive elements, ensure hover/focus states provide clear visual feedback using sufficient contrast shifts.

Recommended combinations

Concrete & Shadow

High-contrast combination for headers, main content, and background, delivering a strong, modern impact.

#2E2E2E · #D9D9D9 · #4A4A4A

Subtle Layers

Creates a softer, layered effect suitable for secondary information, cards, or subtle UI elements.

#7A7A7A · #AFAFAF · #D9D9D9

Deep Urban

For bold statements, dark mode themes, or areas requiring a more intense, brooding atmosphere.

#4A4A4A · #2E2E2E · #7A7A7A

CSS variables

:root {
  --urban-grunge-wall-1: #4A4A4A;
  --urban-grunge-wall-2: #7A7A7A;
  --urban-grunge-wall-3: #AFAFAF;
  --urban-grunge-wall-4: #D9D9D9;
  --urban-grunge-wall-5: #2E2E2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-wall": {
        1: "#4A4A4A",
        2: "#7A7A7A",
        3: "#AFAFAF",
        4: "#D9D9D9",
        5: "#2E2E2E",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#7A7A7A

Color 3#AFAFAF

Color 4#D9D9D9

Color 5#2E2E2E

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.3:1AA

1.5:1Fail

2.1:1Fail

2:1Fail

3:1AA18

3.2:1AA18

4:1AA18

2:1Fail

1.6:1Fail

6.2:1AA

6.3:1AA

3:1AA18

1.6:1Fail

9.6:1AAA

1.5:1Fail

3.2:1AA18

6.2:1AA

9.6:1AAA

Similar palettes

More like Urban Grunge Wall

View all Neutral

Industrial Grunge Fade

Urban Canvas

Urban Concrete Jungle

Minimalist Concrete

Modern Loft

Urban Alley Murals