Back to palettes

Palette

Urban Grunge

Gritty and industrial tones reflecting the raw, unpolished aesthetic of urban environments.

neutraldark5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7F8C8D#556270#2C3E50#95A5A6#34495E

Palette guide

How to use Urban Grunge

Overview

The Urban Grunge palette offers a robust collection of gritty, industrial tones perfect for projects demanding a raw, unpolished aesthetic. Featuring deep blue-greys like #2C3E50 and #34495E, alongside versatile medium grey #556270 and lighter shades such as #95A5A6 and #7F8C8D, this scheme provides a strong foundation for modern, minimalist designs. Developers and designers can leverage this palette to evoke a sense of strength, durability, and contemporary urbanity. It's ideal for creating interfaces and branding that feel grounded, authentic, and impactful, providing excellent depth without relying on bright, saturated colors.

Best used for

  • Industrial branding and websites
  • Tech startups seeking a modern edge
  • Automotive or machinery showcases
  • Men's fashion or lifestyle blogs
  • Architectural portfolios and firm websites
  • Gaming interfaces with a dark, serious theme

Suggested color roles

primary

Use #2C3E50 as the dominant color for backgrounds, large headers, or primary branding elements to establish a strong, grounded presence.

secondary

A versatile medium blue-grey, #556270 is perfect for subheadings, active states, or supporting content blocks that need to stand out subtly from the primary.

accent

This lighter, cool grey #7F8C8D serves well for subtle accents, borders, or hover states, providing a gentle contrast without overwhelming the gritty mood.

background

An excellent choice for main content backgrounds, #95A5A6 offers a clean, light base that ensures readability and allows darker elements to pop effectively.

text

For light backgrounds like #95A5A6, use dark text such as #2C3E50 or a charcoal black. For dark backgrounds like #2C3E50, white or off-white text ensures optimal readability and contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #7F8C8D text on #95A5A6 backgrounds for readability, especially for small font sizes.
  • Use a high-contrast text color like white or a very light grey against darker shades such as #2C3E50 and #34495E to meet WCAG standards.
  • Avoid using #556270 and #34495E for adjacent critical elements without a clear visual separator due to their similar luminance.
  • Test color pairings with a contrast checker to confirm all essential text and UI elements meet minimum contrast ratios for diverse users.

Recommended combinations

Industrial Base

Establishes a dark, robust foundation with a light background for clear content display in professional interfaces.

#2C3E50 · #34495E · #95A5A6

Subtle Contrast

Offers a softer, more balanced aesthetic, ideal for secondary content areas or a less stark brand presence.

#556270 · #7F8C8D · #95A5A6

Gritty Highlight

Pairs a deep background with a subtle accent and a medium-tone secondary color for dynamic visual hierarchy.

#2C3E50 · #7F8C8D · #556270

CSS variables

:root {
  --urban-grunge-1: #7F8C8D;
  --urban-grunge-2: #556270;
  --urban-grunge-3: #2C3E50;
  --urban-grunge-4: #95A5A6;
  --urban-grunge-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge": {
        1: "#7F8C8D",
        2: "#556270",
        3: "#2C3E50",
        4: "#95A5A6",
        5: "#34495E",
      }
    }
  }
}

Related searches

industrial color palettegrunge aesthetic colorsdark neutral color schemesconcrete grey paletteurban design colors

Palette colors

Hex values

Color 1#7F8C8D
·
Color 2#556270
·
Color 3#2C3E50
·
Color 4#95A5A6
·
Color 5#34495E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.2:1AA18
1.4:1Fail
2.7:1Fail
2
1.8:1Fail
1.8:1Fail
2.4:1Fail
1.5:1Fail
3
3.2:1AA18
1.8:1Fail
4.3:1AA18
1.2:1Fail
4
1.4:1Fail
2.4:1Fail
4.3:1AA18
3.6:1AA18
5
2.7:1Fail
1.5:1Fail
1.2:1Fail
3.6:1AA18

Similar palettes

More like Urban Grunge

View all neutral
Urban Alley Grit
Urban Canyon Rust
Urban Grime Blues
Urban Grunge Art
Urban Rain Reflection
Ancient Temple Relic