Back to palettes

Palette

Urban Grime Chic

A sophisticated palette reflecting the moody, textured aesthetics of back alleys and rain-slicked city streets after dark.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2F33#5C6067#8D949C#3A535A#1E2024

Palette guide

How to use Urban Grime Chic

Overview

The Urban Grime Chic palette is a sophisticated collection reflecting the moody, textured aesthetics of back alleys and rain-slicked city streets after dark. This dark-leaning palette features deep charcoal #1E2024, dark blue-grey #2C2F33, muted teal-grey #3A535A, and lighter greys #5C6067 and #8D949C. Designers and developers will find this selection perfect for creating a gritty yet refined, modern, and atmospheric aesthetic. It provides excellent depth and contrast, allowing for strong visual narratives and a unique brand identity. Ideal for projects that aim for a mysterious, edgy, or industrial-chic appeal.

Best used for

  • Luxury dark mode interfaces
  • Edgy fashion or streetwear branding
  • Urban photography websites
  • Film noir or mystery game aesthetics
  • Industrial design showcases
  • Music production or DJ platforms

Suggested color roles

primary

#1E2024 - A very deep, almost black, charcoal that serves as a powerful primary color for backgrounds, strong headings, or foundational elements.

secondary

#2C2F33 - A dark blue-grey, excellent for subheadings, navigation, or secondary content areas, providing subtle depth against the primary.

accent

#8D949C - A lighter, cool grey, perfect for subtle highlights, interactive states (hover/active), or delicate separators, offering gentle contrast.

background

#2C2F33 - A solid dark blue-grey, providing a sophisticated and stable background for content, ensuring good readability with lighter text.

text

#8D949C - This lighter, cool grey provides good readability and a sophisticated contrast against darker backgrounds like #1E2024 or #2C2F33.

Accessibility notes

  • Ensure #8D949C text on #1E2024 or #2C2F33 backgrounds meets WCAG AA contrast standards, especially for body text.
  • Avoid using #5C6067 text on #3A535A backgrounds for critical information due to potentially low contrast.
  • When using #1E2024 as a background, ensure foreground elements have sufficient luminosity contrast.
  • Verify that interactive elements are clearly distinguishable, perhaps by using #8D949C for active states.

Recommended combinations

Moody Contrast

Ideal for a dramatic dark mode, using the deepest charcoal as background, light grey for text, and a muted teal-grey for accents.

#1E2024 · #8D949C · #3A535A

Gritty Layers

Creates a subtle, layered effect for complex interfaces or atmospheric designs, using varied dark greys and blue-greys for depth.

#2C2F33 · #5C6067 · #3A535A

Chic Details

Excellent for a sophisticated industrial aesthetic, using the light grey for highlights, deep charcoal for headings, and dark blue-grey for body text.

#8D949C · #1E2024 · #2C2F33

CSS variables

:root {
  --urban-grime-chic-1: #2C2F33;
  --urban-grime-chic-2: #5C6067;
  --urban-grime-chic-3: #8D949C;
  --urban-grime-chic-4: #3A535A;
  --urban-grime-chic-5: #1E2024;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grime-chic": {
        1: "#2C2F33",
        2: "#5C6067",
        3: "#8D949C",
        4: "#3A535A",
        5: "#1E2024",
      }
    }
  }
}

Related searches

dark urban color palettegrungy chic design colorsindustrial dark thememoody grey blue schemesophisticated grunge palette

Palette colors

Hex values

Color 1#2C2F33
·
Color 2#5C6067
·
Color 3#8D949C
·
Color 4#3A535A
·
Color 5#1E2024
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
1.6:1Fail
1.2:1Fail
2
2.1:1Fail
2.1:1Fail
1.3:1Fail
2.6:1Fail
3
4.4:1AA18
2.1:1Fail
2.7:1Fail
5.3:1AA
4
1.6:1Fail
1.3:1Fail
2.7:1Fail
2:1Fail
5
1.2:1Fail
2.6:1Fail
5.3:1AA
2:1Fail

Similar palettes

More like Urban Grime Chic

View all dark
Distressed Concrete Grit
Smokestack Iron Grind
Urban Grunge Alley
Urban Grunge Texture
Corroded Metal Grit
Industrial Ember Glow