Back to palettes

Palette

Urban Grunge Soul

Gritty and somber, this palette reflects the textured layers and cool tones of an old industrial urban landscape.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F3E46#526770#83979B#B4C6CD#637F8F

Palette guide

How to use Urban Grunge Soul

Overview

The Urban Grunge Soul palette captures the essence of raw, industrial aesthetics with its cool, muted blue-grey tones. Dominant shades like the deep #2F3E46 and the robust #526770 provide a strong, grounded foundation, while the lighter #B4C6CD offers essential contrast. This collection, enriched by the versatile #637F8F, is perfect for designs seeking a sophisticated yet gritty character. It evokes the textured layers of urban landscapes, making it ideal for brands that value authenticity and a modern, unpolished appeal. Designers and developers will find these hues excellent for creating immersive, atmospheric user experiences with a distinct mood.

Best used for

  • Industrial-themed website designs or apps
  • Branding for tech startups or architectural firms
  • Gaming interfaces or dark mode applications
  • Men's fashion or rugged outdoor gear branding
  • Portfolio sites for photographers or artists with a gritty style
  • Brutalist or minimalist design projects

Suggested color roles

primary

#2F3E46 (Deep Slate): Use as the dominant background or header color for a strong, authoritative presence in dark mode themes or impactful hero sections.

secondary

#526770 (Gritty Steel): Excellent for supporting panels, card backgrounds, or secondary navigation elements, providing depth against the primary shade.

accent

#637F8F (Urban Fog): Apply sparingly for call-to-action buttons, key icons, or subtle highlights to draw attention without disrupting the palette's somber mood.

background

#B4C6CD (Concrete Light): Ideal for lighter sections, content containers, or as a contrasting background when a less intense base is required, offering breathability.

text

#B4C6CD (Concrete Light): Best used for body text on dark backgrounds like #2F3E46 or #526770 to ensure optimal readability and maintain the cool, muted aesthetic.

Accessibility notes

  • Ensure sufficient contrast between #2F3E46 and #B4C6CD for text, meeting WCAG AA standards for large and regular text.
  • Avoid placing #526770 text directly on #637F8F backgrounds, as their proximity in value may hinder readability.
  • Use #B4C6CD for critical UI elements on darker shades to ensure they are easily discernible and clickable.
  • Test all text color combinations against their respective backgrounds, especially with #83979B which can struggle as a text color on mid-tones.

Recommended combinations

Dark Base UI

Ideal for dark mode interfaces, where #2F3E46 is the main background, #526770 defines cards or panels, and #B4C6CD provides legible text.

#2F3E46 · #526770 · #B4C6CD

Industrial Accent

Use #B4C6CD as a light background, #83979B for secondary elements, and #637F8F as a striking accent for buttons or icons.

#B4C6CD · #83979B · #637F8F

Gritty Depth

Layered backgrounds with #526770 as a base, #2F3E46 for deep shadows or overlays, and #83979B for subtle, textural details.

#526770 · #2F3E46 · #83979B

CSS variables

:root {
  --urban-grunge-soul-1: #2F3E46;
  --urban-grunge-soul-2: #526770;
  --urban-grunge-soul-3: #83979B;
  --urban-grunge-soul-4: #B4C6CD;
  --urban-grunge-soul-5: #637F8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-soul": {
        1: "#2F3E46",
        2: "#526770",
        3: "#83979B",
        4: "#B4C6CD",
        5: "#637F8F",
      }
    }
  }
}

Related searches

industrial color schemedark grunge paletteurban grey blue colorsbrutalist web design colorsmuted cool tones for branding

Palette colors

Hex values

Color 1#2F3E46
·
Color 2#526770
·
Color 3#83979B
·
Color 4#B4C6CD
·
Color 5#637F8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.6:1AA18
6.3:1AA
2.6:1Fail
2
1.9:1Fail
1.9:1Fail
3.4:1AA18
1.4:1Fail
3
3.6:1AA18
1.9:1Fail
1.7:1Fail
1.4:1Fail
4
6.3:1AA
3.4:1AA18
1.7:1Fail
2.4:1Fail
5
2.6:1Fail
1.4:1Fail
1.4:1Fail
2.4:1Fail

Similar palettes

More like Urban Grunge Soul

View all dark
Smokestack Iron Grind
Acid Rain Gloom
City Grunge Texture
City Rain Puddle
Distressed Concrete Grit
Industrial Grid Noir