Back to palettes

Palette

Urban Grayscale Grit

A stark, modern palette of varying greys reflecting the concrete and steel of an urban landscape.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#5C5C5C#8F8F8F#C0C0C0#EEEEEE

Palette guide

How to use Urban Grayscale Grit

Overview

The Urban Grayscale Grit palette presents a stark, modern range of greys, perfectly reflecting the concrete and steel of an urban landscape. From the deep #2B2B2B to the bright #EEEEEE, with intermediate shades like #5C5C5C, #8F8F8F, and #C0C0C0, this collection is indispensable for designers and developers creating robust, minimalist, and contemporary digital experiences. Its ability to convey strength and sophistication makes it ideal for industrial themes, powerful branding, or any project requiring a grounded and serious aesthetic. The clear progression allows for intuitive visual hierarchy.

Best used for

  • Industrial brand identity
  • Robust web applications
  • Modern art portfolios
  • Dark mode UI themes
  • Architectural design presentations
  • Minimalist e-commerce platforms

Suggested color roles

primary

Use #2B2B2B (Very Dark Gray) for dominant sections, headers, or backgrounds in dark mode to establish a strong, foundational presence.

secondary

Apply #5C5C5C (Dark Gray) for supporting content blocks, navigation, or container elements, offering clear visual separation.

accent

Employ #8F8F8F (Medium Gray) for subtle highlights, interactive elements, or icons that need to stand out without being overly bright.

background

Utilize #EEEEEE (Light Gray) as a clean, bright background for main content areas, providing excellent readability for darker text.

text

For primary text on light backgrounds, #2B2B2B provides excellent contrast. For secondary text, #5C5C5C works well. On dark backgrounds, use #EEEEEE.

Accessibility notes

  • Ensure #2B2B2B text on #EEEEEE background meets WCAG AA contrast for small text.
  • Be cautious with #8F8F8F text on #C0C0C0 backgrounds; verify contrast for readability.
  • For interactive elements, ensure distinct hover/focus states beyond just color changes.
  • Avoid using #C0C0C0 as text color on #8F8F8F backgrounds without significant size increase.

Recommended combinations

Strong Foundation

A powerful dark base with a lighter contrast, suitable for headers and main content areas.

#2B2B2B · #5C5C5C · #EEEEEE

Layered Grays

Creates subtle depth for UI elements or background textures, maintaining a cohesive monochromatic look.

#5C5C5C · #8F8F8F · #C0C0C0

Clean Contrast

Ideal for clear readability, using a very dark text on a very light background with a mid-tone accent.

#2B2B2B · #C0C0C0 · #EEEEEE

CSS variables

:root {
  --urban-grayscale-grit-1: #2B2B2B;
  --urban-grayscale-grit-2: #5C5C5C;
  --urban-grayscale-grit-3: #8F8F8F;
  --urban-grayscale-grit-4: #C0C0C0;
  --urban-grayscale-grit-5: #EEEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grayscale-grit": {
        1: "#2B2B2B",
        2: "#5C5C5C",
        3: "#8F8F8F",
        4: "#C0C0C0",
        5: "#EEEEEE",
      }
    }
  }
}

Related searches

urban gray paletteindustrial minimalist colorsdark gray UI themeconcrete color schememodern grayscale design

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#5C5C5C
·
Color 3#8F8F8F
·
Color 4#C0C0C0
·
Color 5#EEEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
7.8:1AAA
12.2:1AAA
2
2.1:1Fail
2.1:1Fail
3.7:1AA18
5.8:1AA
3
4.4:1AA18
2.1:1Fail
1.8:1Fail
2.8:1Fail
4
7.8:1AAA
3.7:1AA18
1.8:1Fail
1.6:1Fail
5
12.2:1AAA
5.8:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Urban Grayscale Grit

View all monochrome
Grayscale Urban Loft
Industrial Steel Dawn
Urban Alley Glow
Urban Asphalt Glint
Urban Concrete Jungle
Urban Industrial Echo