Back to palettes

Palette

Urban Grunge Concrete

Reflects the raw, unrefined aesthetics of urban concrete and steel, with shades of cool, industrial greys.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2C28#4D4F4F#707070#9A9DA0#C2C5AA

Palette guide

How to use Urban Grunge Concrete

Overview

The "Urban Grunge Concrete" palette offers a sophisticated exploration of cool, industrial greys, perfect for designs seeking a raw, unrefined aesthetic. Anchored by the deep, commanding #2B2C28, it transitions through versatile mid-tones like #4D4F4F and #707070, culminating in the lighter, subtly nuanced #9A9DA0 and #C2C5AA. This collection is ideal for designers and developers aiming to evoke a modern, minimalist mood, reminiscent of urban landscapes and brutalist architecture. Its inherent coolness provides a strong foundation for high-tech interfaces, sophisticated branding, or any project requiring an understated yet powerful visual identity.

Best used for

  • Industrial-themed website interfaces
  • Modern architectural firm branding
  • UI/UX designs for tech startups
  • Minimalist photography portfolio layouts
  • Urban lifestyle e-commerce platforms
  • Digital art and graphic design projects

Suggested color roles

primary

#2B2C28. Utilize this deep charcoal as a foundational color for headers, strong borders, or dark mode backgrounds, providing a sense of gravitas and modernity.

secondary

#4D4F4F. A versatile mid-grey, perfect for subheadings, navigation elements, or as a background for content blocks that need to stand out subtly from lighter backgrounds.

accent

#C2C5AA. This light, slightly desaturated sage-grey acts as a sophisticated accent for interactive elements, subtle highlights, or graphic details, offering gentle contrast.

background

#9A9DA0. Employ this light, neutral grey as a clean, expansive canvas for web pages and applications, ensuring readability and a calm user experience.

text

#2B2C28. Best for primary text on lighter backgrounds like #9A9DA0 or #C2C5AA to ensure excellent readability. For dark backgrounds, consider a near-white such as #F5F5F5.

Accessibility notes

  • Ensure #2B2C28 text on #C2C5AA or #9A9DA0 backgrounds meets WCAG AA large text contrast ratios.
  • Avoid using #707070 as text on #9A9DA0 backgrounds, as contrast may be insufficient for readability.
  • Interactive elements like buttons should clearly distinguish their states using sufficient contrast, potentially with a pure white label on darker shades.
  • For smaller body text, prioritize high contrast pairs such as #2B2C28 on #C2C5AA to maintain legibility.

Recommended combinations

Deep Urban Gradient

Ideal for creating depth in hero sections, layered backgrounds, or sophisticated dark-mode interfaces, offering a seamless transition of dark to mid-tones.

#2B2C28 · #4D4F4F · #707070

Subtle Concrete Blend

Perfect for UI components like cards, panels, or secondary navigation, providing soft contrast and a clean, modern aesthetic.

#9A9DA0 · #C2C5AA · #4D4F4F

Industrial Accent Pop

Use for impactful calls-to-action, prominent headings, or graphic elements where the light accent needs to stand out against deeper, grounding tones.

#2B2C28 · #C2C5AA · #707070

CSS variables

:root {
  --urban-grunge-concrete-1: #2B2C28;
  --urban-grunge-concrete-2: #4D4F4F;
  --urban-grunge-concrete-3: #707070;
  --urban-grunge-concrete-4: #9A9DA0;
  --urban-grunge-concrete-5: #C2C5AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-concrete": {
        1: "#2B2C28",
        2: "#4D4F4F",
        3: "#707070",
        4: "#9A9DA0",
        5: "#C2C5AA",
      }
    }
  }
}

Related searches

industrial grey color schememodern concrete paletteminimalist website colorsurban design palettecool neutral color codes

Palette colors

Hex values

Color 1#2B2C28
·
Color 2#4D4F4F
·
Color 3#707070
·
Color 4#9A9DA0
·
Color 5#C2C5AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
5.2:1AA
7.9:1AAA
2
1.7:1Fail
1.7:1Fail
3:1AA18
4.7:1AA
3
2.8:1Fail
1.7:1Fail
1.8:1Fail
2.8:1Fail
4
5.2:1AA
3:1AA18
1.8:1Fail
1.5:1Fail
5
7.9:1AAA
4.7:1AA
2.8:1Fail
1.5:1Fail

Similar palettes

More like Urban Grunge Concrete

View all neutral
Urban Canvas Grey
City Concrete Grind
Concrete Grid Lines
Concrete Jungle
Concrete Loft Living
Industrial Loft Concrete