Back to palettes

Palette

Urban Concrete Grays

Cool, unyielding shades of grey embody the raw, minimalist aesthetic of urban industrial architecture.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A3B3C#5C5D5E#808182#A3A4A5#C8C9CA

Palette guide

How to use Urban Concrete Grays

Overview

The Urban Concrete Grays palette offers a sophisticated, minimalist foundation for designs seeking an industrial or modern aesthetic. Comprising five cool, unyielding shades of grey—from the deep charcoal of #3A3B3C to the airy light grey of #C8C9CA—this collection embodies the raw elegance of concrete and metal. Designers and developers can leverage these versatile neutrals to create clean interfaces, architectural renders, or brand identities that exude strength and understated professionalism. The mid-tones like #808182 provide excellent balance, ensuring visual harmony across various applications while maintaining a contemporary edge. This palette is ideal for projects requiring a solid, unpretentious backdrop or primary color scheme.

Best used for

  • Modern architectural visualization and renderings
  • Minimalist UI/UX design for web and mobile applications
  • Industrial-themed branding and corporate identity
  • Sleek product design and packaging
  • Contemporary interior design palettes
  • Portfolio websites for creatives and tech professionals

Suggested color roles

primary

#3A3B3C - Use this deep, anchoring grey for main structural elements, navigation bars, or strong brand typography where a sense of gravitas is desired.

secondary

#5C5D5E - Ideal for sub-headings, secondary buttons, or large background sections that need to feel substantial without being overwhelming.

accent

#C8C9CA - Employ this lightest shade sparingly for subtle highlights, active states, or delicate dividing lines to add a touch of brightness and distinction.

background

#A3A4A5 - A versatile and clean background color for content areas, cards, or entire page layouts, providing a neutral canvas that supports other elements.

text

#3A3B3C or a near-black alternative - For optimal readability, use the darkest grey, #3A3B3C, for body text, ensuring strong contrast against lighter backgrounds like #C8C9CA or #A3A4A5.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially with adjacent grey shades, by checking WCAG 2.1 AA or AAA guidelines.
  • Avoid using #A3A4A5 for small text on #C8C9CA backgrounds; opt for darker shades like #5C5D5E or #3A3B3C.
  • Consider using larger font sizes or bolding for critical information when using mid-tone grays like #808182 on similar backgrounds.
  • Always test color combinations with accessibility tools to confirm readability for users with various visual impairments.

Recommended combinations

Deep Contrast

Excellent for high-contrast UI elements, dark mode themes, or bold branding where #3A3B3C serves as primary text on a light background.

#3A3B3C · #A3A4A5 · #C8C9CA

Subtle Gradient

Perfect for creating layered backgrounds, subtle card distinctions, or gradients that evoke depth and sophistication without harsh transitions.

#5C5D5E · #808182 · #A3A4A5

Highlight Focus

Use #A3A4A5 as a main background, #808182 for secondary content, and #3A3B3C for important calls to action or headings, drawing attention effectively.

#808182 · #A3A4A5 · #3A3B3C

CSS variables

:root {
  --urban-concrete-grays-1: #3A3B3C;
  --urban-concrete-grays-2: #5C5D5E;
  --urban-concrete-grays-3: #808182;
  --urban-concrete-grays-4: #A3A4A5;
  --urban-concrete-grays-5: #C8C9CA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-grays": {
        1: "#3A3B3C",
        2: "#5C5D5E",
        3: "#808182",
        4: "#A3A4A5",
        5: "#C8C9CA",
      }
    }
  }
}

Related searches

industrial grey color palettemodern concrete design colorsminimalist grey schemesurban aesthetic color codescool grey ui colors

Palette colors

Hex values

Color 1#3A3B3C
·
Color 2#5C5D5E
·
Color 3#808182
·
Color 4#A3A4A5
·
Color 5#C8C9CA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
4.5:1AA18
6.8:1AA
2
1.7:1Fail
1.7:1Fail
2.6:1Fail
4:1AA18
3
2.9:1Fail
1.7:1Fail
1.6:1Fail
2.4:1Fail
4
4.5:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.8:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Urban Concrete Grays

View all neutral
Bare Concrete Stillness
Brutalist Bloom Grey
City Concrete Grind
Concrete Garden Grey
Concrete Grid Lines
Concrete Loft Living