Palette

Abstract Grunge Wall

A gritty yet cohesive palette reflecting urban decay and modern abstract textures.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#2F4F4F#808080#A9A9A9#D3D3D3

Palette guide

How to use Abstract Grunge Wall

Overview

The Abstract Grunge Wall palette offers a gritty yet cohesive array of neutral grays, reflecting urban decay and modern abstract textures. Featuring a deep Charcoal Gray (#36454F), a rich Dark Slate Gray (#2F4F4F), a balanced Medium Gray (#808080), a lighter Dark Gray (#A9A9A9), and a soft Light Gray (#D3D3D3), this collection evokes an industrial, raw aesthetic. Designers and developers can leverage these cool, muted tones to create atmospheric backgrounds, textured user interfaces, or sophisticated branding that conveys strength and authenticity. Its subtle tonal shifts are ideal for projects aiming for an understated, rugged, or minimalist feel, ensuring a cohesive and visually interesting design without relying on bright colors.

Best used for

Urban-themed branding and identities
Industrial design and architectural visualizations
Grunge or distressed graphic design projects
Minimalist website backgrounds and UI textures
Photography portfolios with a raw aesthetic
Fashion and lifestyle brands seeking an edgy look

Suggested color roles

primary

#36454F (Charcoal Gray) - Use this deep gray for dominant backgrounds, strong structural elements, or primary text to establish a solid, grounded feel.

secondary

#2F4F4F (Dark Slate Gray) - Excellent for secondary content areas, subtle shadows, or as a contrasting dark tone to add depth and texture.

accent

#A9A9A9 (Dark Gray) - Deploy this lighter gray sparingly for highlights, interactive states, or subtle graphical elements that need to stand out gently.

background

Utilize #D3D3D3 (Light Gray) for a cleaner, open feel, or #36454F (Charcoal Gray) for a moodier, more atmospheric backdrop that enhances texture.

text

For optimal readability, use #2F4F4F (Dark Slate Gray) or black on lighter backgrounds, and crisp white (#FFFFFF) or #D3D3D3 (Light Gray) on darker elements.

Accessibility notes

Ensure sufficient contrast when using mid-tone grays like #808080 for text on backgrounds of similar lightness; opt for darker text or a clearer background.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA standards, especially between adjacent grays.
As a neutral palette, rely on visual cues like underlines, icons, or borders to indicate interactive elements, not just subtle color shifts.
Avoid using #A9A9A9 (Dark Gray) or #D3D3D3 (Light Gray) for small text on backgrounds that are only slightly darker or lighter, respectively.

Recommended combinations

Deep Urban

Ideal for creating atmospheric backgrounds, layered textures, or a strong, grounded base for urban designs.

#36454F · #2F4F4F · #808080

Gritty Contrast

Effective for high-readability text on backgrounds, or for defining clear sections in a minimalist, industrial layout.

#D3D3D3 · #36454F · #A9A9A9

Subtle Texture

Perfect for creating subtle visual hierarchy, ghost buttons, or adding delicate textural variations in UI elements.

#808080 · #A9A9A9 · #D3D3D3

CSS variables

:root {
  --abstract-grunge-wall-1: #36454F;
  --abstract-grunge-wall-2: #2F4F4F;
  --abstract-grunge-wall-3: #808080;
  --abstract-grunge-wall-4: #A9A9A9;
  --abstract-grunge-wall-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-grunge-wall": {
        1: "#36454F",
        2: "#2F4F4F",
        3: "#808080",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#2F4F4F

Color 3#808080

Color 4#A9A9A9

Color 5#D3D3D3

Accessibility

Contrast checker

1.1:1Fail

2.5:1Fail

4.2:1AA18

6.6:1AA

1.1:1Fail

2.3:1Fail

3.8:1AA18

6:1AA

2.5:1Fail

2.3:1Fail

1.7:1Fail

2.6:1Fail

4.2:1AA18

3.8:1AA18

1.7:1Fail

1.6:1Fail

6.6:1AA

6:1AA

2.6:1Fail

1.6:1Fail

Similar palettes

More like Abstract Grunge Wall

View all neutral

Concrete Jungle

Urban Canvas Grey

Urban Grunge Concrete

Bare Concrete Stillness

Brutalist Bloom Grey

City Concrete Grind