Back to palettes

Palette

Cityscape Blueprint

A crisp, structured palette reflecting the cool, ordered lines and subtle nuances of a city's architectural blueprints.

Neutralminimal5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#7F8C8D#BDC3C7#ECF0F1#95A5A6

Palette guide

How to use Cityscape Blueprint

Overview

The "Cityscape Blueprint" palette embodies the crisp, structured aesthetic of architectural plans and urban concrete. This cool, neutral gradient ranges from a deep, commanding charcoal blue #2C3E50 to a very light, almost off-white #ECF0F1. Intermediate shades like #7F8C8D, #BDC3C7, and #95A5A6 provide smooth transitions, making it ideal for creating clean, professional, and minimalist designs. Designers and developers can leverage this palette for high-tech interfaces, corporate branding, or any project requiring a precise, modern, and understated elegance that conveys stability and innovation.

Best used for

  • Architectural firm websites
  • Engineering and construction branding
  • Modern corporate interfaces
  • Minimalist UI/UX design
  • Tech documentation platforms
  • Sustainable design portfolios

Suggested color roles

primary

#2C3E50 - A strong, deep charcoal blue, ideal for foundational elements, headers, or robust typography.

secondary

#7F8C8D - A versatile medium gray-blue, perfect for secondary panels, navigation, or subtle dividers.

accent

#95A5A6 - A balanced mid-tone gray, suitable for interactive elements, borders, or subtle highlights.

background

#ECF0F1 - A very light, almost white, providing a clean, expansive, and airy canvas for content.

text

#2C3E50 - For highly readable body text on light backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #BDC3C7 or #ECF0F1 for text on similar light backgrounds.
  • Darker colors like #2C3E50 provide excellent contrast for light text (e.g., white), enhancing readability.
  • Avoid using mid-tones for small text on closely related mid-tone backgrounds, as this can reduce legibility.
  • Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, especially across the lighter shades.

Recommended combinations

Blueprint Depth

Ideal for dark-themed interfaces, creating visual hierarchy and a sense of robust structure.

#2C3E50 · #7F8C8D · #95A5A6

Clean Lines

Excellent for light mode applications, using the lightest for background and the darkest for key text.

#ECF0F1 · #BDC3C7 · #2C3E50

Subtle Structure

Use for delicate borders, hover effects, or to add slight dimensionality to elements without harsh contrast.

#7F8C8D · #95A5A6 · #BDC3C7

CSS variables

:root {
  --cityscape-blueprint-1: #2C3E50;
  --cityscape-blueprint-2: #7F8C8D;
  --cityscape-blueprint-3: #BDC3C7;
  --cityscape-blueprint-4: #ECF0F1;
  --cityscape-blueprint-5: #95A5A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cityscape-blueprint": {
        1: "#2C3E50",
        2: "#7F8C8D",
        3: "#BDC3C7",
        4: "#ECF0F1",
        5: "#95A5A6",
      }
    }
  }
}

Related searches

architectural color paletteminimalist grey bluecorporate UI colorsmodern construction paletteclean tech branding

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#7F8C8D
·
Color 3#BDC3C7
·
Color 4#ECF0F1
·
Color 5#95A5A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
6.2:1AA
9.6:1AAA
4.3:1AA18
2
3.2:1AA18
2:1Fail
3:1AA18
1.4:1Fail
3
6.2:1AA
2:1Fail
1.6:1Fail
1.4:1Fail
4
9.6:1AAA
3:1AA18
1.6:1Fail
2.2:1Fail
5
4.3:1AA18
1.4:1Fail
1.4:1Fail
2.2:1Fail

Similar palettes

More like Cityscape Blueprint

View all Neutral
Concrete Urbanity
Urban Zen Stone
Calm Pebble Path
Modern Loft
Urban Loft Minimal
Architectural Concrete Edge