Palette

Monochrome Cityscape

A refined scale of blues and greys, reflecting the sleek, modern lines of an urban landscape under a twilight sky.

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

#2C3E50#5A7D9A#A3BED2#1F2D3D#7C98AF

Palette guide

How to use Monochrome Cityscape

Overview

The Monochrome Cityscape palette offers a sophisticated blend of cool blues and greys, evoking the sleek lines of modern architecture under a twilight sky. Anchored by deep tones like #1F2D3D and #2C3E50, it provides a strong foundation for elegant designs. Mid-tones such as #5A7D9A and #7C98AF add depth and versatility, while the lighter #A3BED2 brings a touch of calm and spaciousness. This palette is perfect for designers and developers aiming to create professional, serene, yet impactful interfaces, conveying trust and stability. It's particularly effective for corporate, tech, or luxury applications where a refined, cool aesthetic is paramount.

Best used for

Corporate and financial service websites
Technology product interfaces and branding
Modern architectural firm portfolios
Healthcare or wellness app designs
Clean, professional presentation templates
Editorial designs requiring a sophisticated, cool tone

Suggested color roles

primary

Use #2C3E50 as a primary background or dominant color to establish a deep, professional, and calming presence.

secondary

Apply #1F2D3D for footers, darker navigation elements, or as a strong accent, providing robust depth.

accent

Utilize #5A7D9A for interactive elements, highlights, or secondary calls-to-action, offering a subtle yet distinct visual cue.

background

Employ #7C98AF for content cards, panels, or sections that need to stand out gently against the primary dark tones.

text

Pair light colors like #A3BED2 with dark backgrounds (e.g., #1F2D3D) for excellent readability. For #A3BED2 backgrounds, use #1F2D3D text.

Accessibility notes

Ensure sufficient contrast when using #7C98AF for text on #5A7D9A or similar mid-tones; it may fall short for WCAG AA.
The lightest color, #A3BED2, provides excellent contrast against the darkest tones like #1F2D3D for large text.
Avoid using #5A7D9A text on #7C98AF backgrounds for small font sizes due to potential readability issues.
Prioritize #1F2D3D for essential text elements on light backgrounds to maximize legibility for all users.

Recommended combinations

Deep Professional

Ideal for high-contrast headers, navigation bars, or hero sections to convey authority and clarity.

#1F2D3D · #A3BED2 · #2C3E50

Serene Layers

Excellent for creating layered UI elements, background gradients, or card components with subtle depth.

#2C3E50 · #7C98AF · #5A7D9A

Light Focus

Apply for content areas where a light background is needed, with dark text and a mid-tone for accents or links.

#A3BED2 · #1F2D3D · #7C98AF

CSS variables

:root {
  --monochrome-cityscape-3-1: #2C3E50;
  --monochrome-cityscape-3-2: #5A7D9A;
  --monochrome-cityscape-3-3: #A3BED2;
  --monochrome-cityscape-3-4: #1F2D3D;
  --monochrome-cityscape-3-5: #7C98AF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-cityscape-3": {
        1: "#2C3E50",
        2: "#5A7D9A",
        3: "#A3BED2",
        4: "#1F2D3D",
        5: "#7C98AF",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#5A7D9A

Color 3#A3BED2

Color 4#1F2D3D

Color 5#7C98AF

Accessibility

Contrast checker

2.5:1Fail

5.7:1AA

1.3:1Fail

3.6:1AA18

2.5:1Fail

2.2:1Fail

3.2:1AA18

1.4:1Fail

5.7:1AA

2.2:1Fail

7.2:1AAA

1.6:1Fail

1.3:1Fail

3.2:1AA18

7.2:1AAA

4.6:1AA

3.6:1AA18

1.4:1Fail

1.6:1Fail

4.6:1AA

Similar palettes

More like Monochrome Cityscape