Back to palettes

Palette

City Concrete Grind

A stark, minimalist palette reflecting the raw textures and muted tones of city concrete.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Concrete Grind 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 City Concrete Grind.

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

Data visualization

#4A4A4A#757575#A0A0A0#CDCDCD#2C2C2C

Palette guide

How to use City Concrete Grind

Overview

The City Concrete Grind palette embodies the raw, minimalist textures and muted tones of urban concrete and industrial environments. This collection features a range of versatile grays, from the deep #2C2C2C and the solid #4A4A4A, to the balanced #757575 and #A0A0A0, culminating in the lighter #CDCDCD. It's an essential palette for designers aiming for a modern, understated, or industrial aesthetic. Ideal for projects that require a sense of robustness, sophistication, and clarity without distraction. This palette is highly adaptable, providing a strong foundation that allows for bold typography or subtle accent colors to truly stand out.

Best used for

  • Industrial architecture firm websites
  • Modern minimalist interior design portfolios
  • Urban photography and art exhibits
  • Hardware and tool brand identity
  • Tech company UI/UX with a clean aesthetic
  • Sustainable product packaging

Suggested color roles

primary

Use #2C2C2C as a dominant primary for backgrounds or robust structural elements, providing a deep, grounding foundation.

secondary

Employ #4A4A4A for secondary content areas, navigation, or large typography, adding a strong yet balanced presence.

accent

Apply #757575 for subtle accents, borders, or interactive states where a mid-tone gray provides gentle emphasis.

background

Utilize #CDCDCD as a clean, bright background for main content areas, ensuring excellent readability for darker text.

text

For text on darker backgrounds, use #CDCDCD or a bright white. For lighter backgrounds, #2C2C2C or a deep charcoal offers optimal contrast and readability.

Accessibility notes

  • Ensure sufficient contrast when pairing light grays like #A0A0A0 or #CDCDCD with lighter text; always use dark text.
  • Avoid using #757575 for small text on backgrounds of similar luminance to maintain readability.
  • The darkest shades, #2C2C2C and #4A4A4A, provide excellent contrast for white or light grey text.
  • Check contrast ratios for all text and interactive elements, especially when using mid-range grays to ensure WCAG AA compliance.

Recommended combinations

Urban Foundation

Creates a strong, industrial base, perfect for dark mode interfaces or bold headlines with light text.

#2C2C2C · #4A4A4A · #CDCDCD

Grind Texture

Ideal for creating subtle gradients or layered effects that add depth and a tactile, concrete-like feel.

#4A4A4A · #757575 · #A0A0A0

Modern Light

Provides a clean, contemporary look suitable for main content areas, allowing for clear hierarchy and readability.

#CDCDCD · #A0A0A0 · #2C2C2C

CSS variables

:root {
  --city-concrete-grind-1: #4A4A4A;
  --city-concrete-grind-2: #757575;
  --city-concrete-grind-3: #A0A0A0;
  --city-concrete-grind-4: #CDCDCD;
  --city-concrete-grind-5: #2C2C2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-concrete-grind": {
        1: "#4A4A4A",
        2: "#757575",
        3: "#A0A0A0",
        4: "#CDCDCD",
        5: "#2C2C2C",
      }
    }
  }
}

Related searches

concrete grey color paletteindustrial minimalist colorsmodern urban design paletteneutral grey brandingarchitectural color scheme

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#757575
·
Color 3#A0A0A0
·
Color 4#CDCDCD
·
Color 5#2C2C2C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
5.6:1AA
1.6:1Fail
2
1.9:1Fail
1.8:1Fail
2.9:1Fail
3:1AA18
3
3.4:1AA18
1.8:1Fail
1.6:1Fail
5.3:1AA
4
5.6:1AA
2.9:1Fail
1.6:1Fail
8.8:1AAA
5
1.6:1Fail
3:1AA18
5.3:1AA
8.8:1AAA

Similar palettes

More like City Concrete Grind

View all neutral
Industrial Urban Grit
Urban Bloom Concrete
Urban Echo Canvas
Bare Concrete Stillness
Brutalist Bloom Grey
Concrete Canyon Dusk