Back to palettes

Palette

Monochrome Cityscape

A crisp, stark range of greys depicting the modern lines of a bustling metropolis.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#202020#404040#606060#808080#A0A0A0

Palette guide

How to use Monochrome Cityscape

Overview

The Monochrome Cityscape palette provides a crisp, stark range of greys, perfect for depicting the modern lines of a bustling metropolis. With deep tones like #202020 and #404040, it establishes a strong, foundational presence. The mid-range greys, including #606060 and #808080, offer versatility for content and hierarchy, while #A0A0A0 introduces a lighter touch. This palette is ideal for designers and developers aiming for a sleek, modern, and strong aesthetic. It excels in creating professional interfaces, tech branding, or architectural visualizations where clarity, precision, and a sophisticated urban feel are paramount, ensuring a timeless and polished look.

Best used for

  • Sleek tech company branding and websites
  • Modern architectural portfolios and presentations
  • High-contrast data dashboards and analytics platforms
  • Minimalist e-commerce sites for luxury goods
  • Urban-themed app interfaces and digital tools
  • Professional corporate reports and documents

Suggested color roles

primary

Use #202020 as the dominant dark background or for major structural elements, providing a strong, modern anchor.

secondary

Employ #404040 for secondary panels, containers, or darker text, adding depth without harshness.

accent

Leverage #808080 for subtle interactive elements, borders, or as a lighter accent against darker tones.

background

Utilize #606060 for content sections or cards, offering a balanced mid-grey canvas that supports both light and dark text.

text

For light backgrounds like #A0A0A0, use #202020 for headings and #404040 for body text. For dark backgrounds, use white or near-white.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing mid-range greys like #606060 with #808080 text.
  • #202020 provides excellent contrast against #A0A0A0 for all text sizes, meeting WCAG AA standards.
  • Avoid using #808080 for small text on #606060 backgrounds; readability may be compromised.
  • For critical information, use the highest contrast possible, such as #202020 on #A0A0A0.

Recommended combinations

Sharp Contrast

Ideal for hero sections, bold headlines, or feature blocks where strong visual impact and clarity are needed.

#202020 · #A0A0A0 · #606060

Layered Depth

Excellent for creating subtle depth in UI components, card backgrounds, or layered information displays.

#404040 · #606060 · #808080

Content Focus

Apply for main content areas with a light background, ensuring dark, readable text and clear hierarchy.

#A0A0A0 · #202020 · #404040

CSS variables

:root {
  --monochrome-cityscape-1: #202020;
  --monochrome-cityscape-2: #404040;
  --monochrome-cityscape-3: #606060;
  --monochrome-cityscape-4: #808080;
  --monochrome-cityscape-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-cityscape": {
        1: "#202020",
        2: "#404040",
        3: "#606060",
        4: "#808080",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

sleek grey color schememodern urban monochromehigh contrast grey paletteminimalist dark grey uiprofessional grey website colors

Palette colors

Hex values

Color 1#202020
·
Color 2#404040
·
Color 3#606060
·
Color 4#808080
·
Color 5#A0A0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
6.2:1AA
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.2:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Monochrome Cityscape

View all monochrome
Concrete Jungle Hue
Graphite Cityscape
Architectural Grid Hues
Art Gallery Minimal
Brushed Steel Aura
Charcoal Whisper Scale