Palette

Industrial Cityscape Grey

A stark, powerful palette reflecting the raw, unadorned beauty of concrete and steel in a metropolis.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Cityscape Grey 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 Industrial Cityscape Grey.

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

Data visualization

#4A4A4A#777777#AAAAAA#DEDEDE#222222

Palette guide

How to use Industrial Cityscape Grey

Overview

The Industrial Cityscape Grey palette is a stark, powerful monochrome collection reflecting the raw, unadorned beauty of concrete and steel in a metropolis. Ranging from the profound #222222 to the light #DEDEDE, with versatile mid-tones like #4A4A4A, #777777, and #AAAAAA, this palette offers a strong foundation for minimalist and urban-inspired designs. Designers and developers can leverage these greys to create robust, modern, and no-nonsense digital experiences. It's ideal for branding and interfaces that emphasize structure, durability, and a clean, architectural aesthetic, perfect for conveying urban sophistication.

Best used for

Urban planning and infrastructure websites
Construction and real estate development branding
Architectural visualization and portfolios
Modern art galleries and exhibition spaces
Tech startups with a minimalist brand identity
Photography portfolios showcasing urban landscapes

Suggested color roles

primary

Designate #222222 as the strongest, darkest foundation for major headings, primary text, and bold UI elements, ensuring maximum impact.

secondary

Utilize #4A4A4A for supporting dark elements, subheadings, or important details, providing robust contrast.

accent

Employ #AAAAAA for subtle highlights, inactive states, or decorative lines, offering a soft visual break and texture.

background

Apply #DEDEDE as a clean, bright, and spacious canvas, evoking concrete textures and enhancing content readability.

text

For optimal readability on lighter backgrounds, use #222222 or #4A4A4A for all body text and essential information.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #777777 on the #DEDEDE background.
Avoid using #AAAAAA for small or critical text on light backgrounds, as its low contrast may impair readability.
Prioritize using #222222 or #4A4A4A for all body text to meet accessibility standards.
Maintain clear visual hierarchy by varying the grey tones, using darker shades for important information.

Recommended combinations

Concrete Foundation

Ideal for a stark UI: #DEDEDE as the background, #222222 for strong text/elements, and #4A4A4A for major sections or primary buttons.

#222222 · #DEDEDE · #4A4A4A

Urban Layers

Excellent for creating subtle depth in UI cards, panels, or layered content sections, mimicking architectural textures.

#4A4A4A · #777777 · #AAAAAA

Minimalist Structure

Use #DEDEDE as a clean base, #222222 for primary text and headers, and #777777 for secondary information or borders.

#DEDEDE · #222222 · #777777

CSS variables

:root {
  --industrial-cityscape-grey-1: #4A4A4A;
  --industrial-cityscape-grey-2: #777777;
  --industrial-cityscape-grey-3: #AAAAAA;
  --industrial-cityscape-grey-4: #DEDEDE;
  --industrial-cityscape-grey-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-cityscape-grey": {
        1: "#4A4A4A",
        2: "#777777",
        3: "#AAAAAA",
        4: "#DEDEDE",
        5: "#222222",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#777777

Color 3#AAAAAA

Color 4#DEDEDE

Color 5#222222

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.6:1AA

1.8:1Fail

2:1Fail

1.9:1Fail

3.3:1AA18

3.6:1AA18

3.8:1AA18

1.9:1Fail

1.7:1Fail

6.8:1AA

6.6:1AA

3.3:1AA18

1.7:1Fail

11.8:1AAA

1.8:1Fail

3.6:1AA18

6.8:1AA

11.8:1AAA

Similar palettes

More like Industrial Cityscape Grey