Back to palettes

Palette

Monochrome Cityscape

Stark and strong, representing the dramatic light and shadow of a minimalist cityscape.

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

#212121#424242#616161#000000#303030

Palette guide

How to use Monochrome Cityscape

Overview

The Monochrome Cityscape palette offers a stark and strong foundation for designs that demand a modern, urban aesthetic. Featuring deep, moody greys like #212121 and #303030, alongside the absolute #000000 black, it captures the dramatic interplay of light and shadow found in minimalist architecture. This collection, including #424242 and #616161, is ideal for creating a sophisticated, high-contrast visual experience. Developers will find these shades excellent for dark mode interfaces, while designers can leverage them to evoke a sense of strength, professionalism, and timeless elegance, perfect for tech or luxury brands seeking a powerful visual identity.

Best used for

  • Dark mode UI designs and dashboards
  • Luxury brand websites and corporate identities
  • Minimalist photography portfolios or art galleries
  • Tech startup branding and app interfaces
  • Architectural and urban design presentations
  • High-contrast editorial layouts

Suggested color roles

primary

Use #212121 as the dominant dark tone for main sections or backgrounds, establishing a profound, modern depth.

secondary

Employ #303030 for secondary elements, panels, or as a slightly lighter yet still dark accent, providing subtle differentiation.

accent

Leverage #000000 for impactful calls-to-action, borders, or critical highlights to ensure maximum contrast and attention.

background

Utilize #424242 for content areas or cards, offering a mid-dark canvas that feels substantial without being overwhelming.

text

For dark backgrounds, use a very light grey like #E0E0E0 or white for optimal legibility. For #616161 background, consider #212121 for headings.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when pairing mid-tones like #616161 with darker text.
  • Avoid using #212121 on #303030 for small text; their contrast may be insufficient for WCAG AA.
  • Prioritize #000000 for key interactive elements or critical information to maximize visibility against lighter greys.
  • When using #616161 for text, ensure its background is significantly lighter (e.g., a near-white) for readability.

Recommended combinations

Deep Contrast

Ideal for header sections, bold typography, or dramatic feature blocks where strong visual separation is desired.

#000000 · #616161 · #212121

Subtle Gradient

Excellent for layered backgrounds, card structures, or subtle depth effects in UI components.

#212121 · #303030 · #424242

Highlight Focus

Apply to emphasize interactive elements or create a strong focal point on a medium-dark background.

#424242 · #000000 · #616161

CSS variables

:root {
  --monochrome-cityscape-2-1: #212121;
  --monochrome-cityscape-2-2: #424242;
  --monochrome-cityscape-2-3: #616161;
  --monochrome-cityscape-2-4: #000000;
  --monochrome-cityscape-2-5: #303030;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-cityscape-2": {
        1: "#212121",
        2: "#424242",
        3: "#616161",
        4: "#000000",
        5: "#303030",
      }
    }
  }
}

Related searches

dark mode color palettemonochromatic black grey designurban minimal color schemehigh contrast ui colorsmodern dark website palette

Palette colors

Hex values

Color 1#212121
·
Color 2#424242
·
Color 3#616161
·
Color 4#000000
·
Color 5#303030
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
1.3:1Fail
1.2:1Fail
2
1.6:1Fail
1.6:1Fail
2.1:1Fail
1.3:1Fail
3
2.6:1Fail
1.6:1Fail
3.4:1AA18
2.1:1Fail
4
1.3:1Fail
2.1:1Fail
3.4:1AA18
1.6:1Fail
5
1.2:1Fail
1.3:1Fail
2.1:1Fail
1.6:1Fail

Similar palettes

More like Monochrome Cityscape

View all monochrome
Abstract Ink Flow
Monochrome Slate
Abstract Canvas Swirl
City Grayscale View
City Loft Minimal
City Steel Gleam