Back to palettes

Palette

Urban Concrete Grays

A collection of cool, understated grays reflecting the stark elegance of city architecture.

MonochromeMinimal5 colors
More Monochrome 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

#4D4D4D#6B6B6B#8A8A8A#A9A9A9#CCCCCC

Palette guide

How to use Urban Concrete Grays

Overview

The "Urban Concrete Grays" palette offers a sophisticated range of cool, understated grays perfect for modern, minimalist designs. This collection, featuring #4D4D4D, #6B6B6B, #8A8A8A, #A9A9A9, and #CCCCCC, evokes the stark elegance of city architecture and industrial aesthetics. Designers can leverage these versatile shades to create a clean, professional, and contemporary feel across various digital and physical applications. Developers will find this monochrome palette excellent for building robust UI frameworks where neutrality and subtle hierarchy are key, allowing content or vibrant accent colors from other palettes to truly stand out. It's ideal for establishing a strong, cohesive visual identity.

Best used for

  • Modern architectural portfolios and websites
  • Tech company branding and user interfaces
  • Industrial design product showcases
  • Minimalist web and app layouts
  • Corporate identity systems requiring a sophisticated neutral base
  • Editorial design with a focus on photography

Suggested color roles

primary

#4D4D4D - Use as the dominant dark element for strong headings, primary buttons, or robust structural components, conveying stability and depth.

secondary

#6B6B6B - Ideal for subheadings, secondary navigation, or backgrounds for focused content blocks, providing a softer contrast to the primary dark.

accent

#A9A9A9 - While not a vibrant accent, use this lighter gray for subtle highlights, borders, or inactive states to maintain a refined, muted aesthetic.

background

#CCCCCC - Excellent for clean, spacious backgrounds that provide a soft, neutral canvas, allowing content to breathe without harsh contrast.

text

#4D4D4D or a true black for primary text on light backgrounds like #CCCCCC, ensuring optimal readability. For secondary text or captions on lighter grays, consider #6B6B6B.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter grays like #A9A9A9 for text on #CCCCCC.
  • Pair darker grays like #4D4D4D with very light backgrounds such as #CCCCCC for optimal text readability (WCAG AA).
  • Avoid using mid-tone grays (e.g., #8A8A8A) for small text on similar mid-tone backgrounds, as contrast will be low.
  • Consider using a pure white or near-white (#F8F8F8) for text on darker grays like #4D4D4D to meet accessibility standards.

Recommended combinations

Deep Contrast

For high-contrast interfaces, using #4D4D4D for primary text/elements, #CCCCCC for backgrounds, and #6B6B6B for secondary information.

#4D4D4D · #CCCCCC · #6B6B6B

Subtle Layers

Ideal for creating visual depth and hierarchy in UI components like cards or panels, where subtle shifts in gray define sections.

#8A8A8A · #A9A9A9 · #6B6B6B

Muted Foundation

Establishes a light, airy base with #CCCCCC and #A9A9A9 for backgrounds and dividers, accented by #4D4D4D for key interactive elements.

#CCCCCC · #A9A9A9 · #4D4D4D

CSS variables

:root {
  --urban-concrete-grays-2-1: #4D4D4D;
  --urban-concrete-grays-2-2: #6B6B6B;
  --urban-concrete-grays-2-3: #8A8A8A;
  --urban-concrete-grays-2-4: #A9A9A9;
  --urban-concrete-grays-2-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-grays-2": {
        1: "#4D4D4D",
        2: "#6B6B6B",
        3: "#8A8A8A",
        4: "#A9A9A9",
        5: "#CCCCCC",
      }
    }
  }
}

Related searches

monochrome gray paletteindustrial color schememinimalist ui colorscool gray hex codesmodern neutral palette

Palette colors

Hex values

Color 1#4D4D4D
·
Color 2#6B6B6B
·
Color 3#8A8A8A
·
Color 4#A9A9A9
·
Color 5#CCCCCC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.6:1AA18
5.3:1AA
2
1.6:1Fail
1.5:1Fail
2.3:1Fail
3.3:1AA18
3
2.4:1Fail
1.5:1Fail
1.5:1Fail
2.1:1Fail
4
3.6:1AA18
2.3:1Fail
1.5:1Fail
1.5:1Fail
5
5.3:1AA
3.3:1AA18
2.1:1Fail
1.5:1Fail

Similar palettes

More like Urban Concrete Grays

View all Monochrome
Grayscale Stone Etch
Gritty Urban Canvas
Abstract Urban Canvas
Ancient Stone Whisper
Celestial Dust Bloom
Geometric Noir Still