Back to palettes

Palette

Monochrome City Grid

A stark, structural palette of deep greys, mirroring the geometric forms and concrete 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 Monochrome City Grid 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 Monochrome City Grid.

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

Data visualization

#1C1C1C#3E3E3E#606060#828282#A4A4A4

Palette guide

How to use Monochrome City Grid

Overview

The "Monochrome City Grid" palette offers a stark, structural collection of deep to mid-range greys, directly mirroring the geometric forms and concrete textures of an urban landscape. From the bold #1C1C1C to the versatile #A4A4A4, including #3E3E3E, #606060, and #828282, this palette is perfect for designers and developers aiming for a modern, architectural, and minimalist aesthetic. Its strong, foundational tones allow for clear visual hierarchies and a sense of precision, making it excellent for projects that require a sophisticated, industrial, or high-tech feel. Explore this palette for impactful and structured visual experiences.

Best used for

  • Architectural visualization websites
  • Modern corporate interfaces
  • Industrial design portfolios
  • Urban planning applications
  • Tech startup branding
  • Data-heavy dashboards

Suggested color roles

primary

Use #1C1C1C as a dominant background or for strong headers, providing a powerful, grounded aesthetic.

secondary

Apply #3E3E3E or #606060 for secondary panels, navigation, or card backgrounds, creating subtle depth.

accent

Utilize #828282 or #A4A4A4 for subtle highlights, interactive elements, or iconography that needs gentle emphasis.

background

Employ #1C1C1C or #3E3E3E for a deep, immersive background, or #A4A4A4 for a lighter primary content area.

text

For dark backgrounds, use #A4A4A4 or white for body text. For lighter backgrounds like #A4A4A4, use #1C1C1C or #3E3E3E for text.

Accessibility notes

  • Ensure high contrast between #1C1C1C text and #A4A4A4 backgrounds (or vice-versa) for readability.
  • Avoid pairing #606060 with #828282 for small text; the contrast might be insufficient.
  • When using #A4A4A4 as text on a darker background, verify it meets WCAG AA standards.
  • Test all text-background pairings with accessibility tools, especially for interactive components.

Recommended combinations

Strong Foundation

Perfect for a dark theme: #1C1C1C as background, #A4A4A4 for main text, and #3E3E3E for secondary elements or borders.

#1C1C1C · #A4A4A4 · #3E3E3E

Grid Layers

Creates subtle depth for layered UI components, such as cards on a background, with slight tonal shifts.

#3E3E3E · #606060 · #828282

Modern Clarity

Use #1C1C1C for headings, #606060 for subheadings, and #A4A4A4 as a background for clean, legible content.

#1C1C1C · #606060 · #A4A4A4

CSS variables

:root {
  --monochrome-city-grid-1: #1C1C1C;
  --monochrome-city-grid-2: #3E3E3E;
  --monochrome-city-grid-3: #606060;
  --monochrome-city-grid-4: #828282;
  --monochrome-city-grid-5: #A4A4A4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-city-grid": {
        1: "#1C1C1C",
        2: "#3E3E3E",
        3: "#606060",
        4: "#828282",
        5: "#A4A4A4",
      }
    }
  }
}

Related searches

urban grey color schememonochromatic architectural palettecity grid hex codesmodern grey UI designindustrial monochrome colors

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#3E3E3E
·
Color 3#606060
·
Color 4#828282
·
Color 5#A4A4A4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.4:1AA18
6.8:1AA
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
4.3:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.5:1Fail
4
4.4:1AA18
2.8:1Fail
1.6:1Fail
1.5:1Fail
5
6.8:1AA
4.3:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Monochrome City Grid

View all monochrome
Urban Grid Echo
Architectural Grid Hues
Concrete Jungle Bloom
Urban Concrete Flow
Urban Concrete Sky
Urban Echo Stone