Back to palettes

Palette

Urban Grime Edge

A sophisticated monochrome journey through muted greys, reminiscent of concrete structures and city shadows.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#808080#A9A9A9#D3D3D3

Palette guide

How to use Urban Grime Edge

Overview

The Urban Grime Edge palette offers a sophisticated monochrome journey, evoking the raw beauty of concrete structures and city shadows. Centered around a spectrum of muted greys, this dark-themed collection is perfect for projects seeking a modern, industrial aesthetic. From the deep, grounding #2F4F4F (Dark Slate Gray) to the lighter, ethereal #D3D3D3 (Light Gray), each hex code contributes to a cohesive, professional feel. Designers can leverage #696969 and #808080 for textual hierarchy, while #A9A9A9 provides subtle contrast. This palette is ideal for creating impactful, understated digital interfaces and branding that demand a contemporary edge.

Best used for

  • Industrial-themed website designs
  • Minimalist UI/UX for tech products
  • Architectural portfolio presentations
  • Urban photography branding
  • Dark mode application interfaces
  • Modern corporate identity systems

Suggested color roles

primary

#2F4F4F - Establishes a deep, anchoring base for backgrounds or dominant UI elements, conveying seriousness and depth.

secondary

#696969 - Ideal for secondary navigation, card backgrounds, or subtle dividers, offering a softer transition from the primary dark tone.

accent

#A9A9A9 - Use sparingly for interactive states, subtle highlights, or small icons to draw attention without overwhelming the monochrome theme.

background

#2F4F4F - Provides a strong, dark canvas suitable for sophisticated dark mode designs or brand immersive experiences.

text

#D3D3D3 - Optimal for primary body text against darker backgrounds like #2F4F4F or #696969, ensuring readability in this dark palette.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using mid-tone grays like #808080 for text.
  • Always test color combinations with accessibility checkers; #D3D3D3 on #2F4F4F should meet WCAG AA standards.
  • Avoid placing #A9A9A9 text on #808080 backgrounds, as contrast may be insufficient for readability.
  • Consider using a pure white or very light grey for critical text elements if the chosen palette colors don't offer enough contrast.

Recommended combinations

Deep Contrast

Perfect for a strong dark background with bright, readable text and subtle interactive elements.

#2F4F4F · #D3D3D3 · #A9A9A9

Subtle Depth

Creates a layered, sophisticated look for content panels or secondary information blocks, with lighter text.

#696969 · #808080 · #D3D3D3

Accent Focus

Use the darkest shade as background, the lightest as a call-to-action or key highlight, and the mid-tone for supportive text.

#2F4F4F · #A9A9A9 · #696969

CSS variables

:root {
  --urban-grime-edge-1: #2F4F4F;
  --urban-grime-edge-2: #696969;
  --urban-grime-edge-3: #808080;
  --urban-grime-edge-4: #A9A9A9;
  --urban-grime-edge-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grime-edge": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#808080",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

dark grey color paletteindustrial monochrome designurban aesthetic colorsmodern dark UI paletteconcrete grey hex codes

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#808080
·
Color 4#A9A9A9
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
3.8:1AA18
6:1AA
2
1.6:1Fail
1.4:1Fail
2.3:1Fail
3.7:1AA18
3
2.3:1Fail
1.4:1Fail
1.7:1Fail
2.6:1Fail
4
3.8:1AA18
2.3:1Fail
1.7:1Fail
1.6:1Fail
5
6:1AA
3.7:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Urban Grime Edge

View all monochrome
Gritty Industrial Grey
Charcoal Smoke Hues
Foggy London Alley
Gritty Factory Floor
Industrial Gear Grind
Industrial Noir Edge