Back to palettes

Palette

City Grayscale View

A minimalist blend of cool grays, reflecting the sleek, understated elegance of urban architecture.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Grayscale View 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 City Grayscale View.

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

Data visualization

#2F4F4F#5C6A72#8E9BA4#B7C4CC#DEE4E7

Palette guide

How to use City Grayscale View

Overview

The City Grayscale View palette offers a sophisticated blend of cool grays, reflecting the sleek and understated elegance of modern urban architecture. Ranging from the deep, cool #2F4F4F and the thoughtful #5C6A72, through the balanced #8E9BA4, to the airy #B7C4CC and the almost white #DEE4E7, this collection provides a serene and professional aesthetic. It's an excellent choice for designers seeking a minimalist, contemporary, or industrial feel with a subtle cool undertone. This palette conveys clarity, precision, and a timeless quality, perfect for projects that value clean lines and a refined visual identity.

Best used for

  • High-tech product design interfaces
  • Architectural firm branding and websites
  • Corporate communications and reports
  • Modern art gallery online presence
  • Minimalist web design for professional services
  • Urban planning and development presentations

Suggested color roles

primary

Use #2F4F4F as a strong primary for backgrounds or structural elements, providing a deep, cool anchor for your design.

secondary

Employ #5C6A72 for secondary content areas or navigation, offering a softer yet still profound contrast to the primary.

accent

Apply #8E9BA4 for subtle accents, borders, or interactive states where a mid-tone cool gray provides gentle emphasis.

background

Utilize #DEE4E7 as a clean, bright background for main content areas, ensuring excellent readability for darker text.

text

For text on darker backgrounds, use #DEE4E7 or a bright white. For lighter backgrounds, #2F4F4F or a deep charcoal offers optimal contrast and readability.

Accessibility notes

  • Ensure sufficient contrast when pairing light grays like #B7C4CC or #DEE4E7 with lighter text; always use dark text.
  • Avoid using #8E9BA4 for small text on backgrounds of similar luminance to maintain readability.
  • The darkest shades, #2F4F4F and #5C6A72, provide excellent contrast for white or light grey text.
  • Check contrast ratios for all text and interactive elements, especially when using mid-range grays to ensure WCAG AA compliance.

Recommended combinations

Sleek Foundation

Creates a sophisticated, cool-toned base, excellent for dark mode interfaces or clean, professional layouts.

#2F4F4F · #5C6A72 · #DEE4E7

Architectural Layers

Ideal for subtle gradients or layered effects that add depth and a refined, architectural feel to designs.

#5C6A72 · #8E9BA4 · #B7C4CC

Cool Horizon

Provides a bright, airy look suitable for main content areas, allowing for clear hierarchy and readability with a cool anchor.

#DEE4E7 · #B7C4CC · #2F4F4F

CSS variables

:root {
  --city-grayscale-view-2-1: #2F4F4F;
  --city-grayscale-view-2-2: #5C6A72;
  --city-grayscale-view-2-3: #8E9BA4;
  --city-grayscale-view-2-4: #B7C4CC;
  --city-grayscale-view-2-5: #DEE4E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-grayscale-view-2": {
        1: "#2F4F4F",
        2: "#5C6A72",
        3: "#8E9BA4",
        4: "#B7C4CC",
        5: "#DEE4E7",
      }
    }
  }
}

Related searches

cool grey color palettemonochromatic blue greymodern architectural colorsminimalist cool tonesprofessional grey scheme

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#5C6A72
·
Color 3#8E9BA4
·
Color 4#B7C4CC
·
Color 5#DEE4E7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.1:1AA18
5:1AA
7:1AA
2
1.6:1Fail
2:1Fail
3.1:1AA18
4.4:1AA18
3
3.1:1AA18
2:1Fail
1.6:1Fail
2.2:1Fail
4
5:1AA
3.1:1AA18
1.6:1Fail
1.4:1Fail
5
7:1AA
4.4:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like City Grayscale View

View all monochrome
Urban Concrete Echo
City Steel Gleam
Concrete Jungle Hue
Industrial Chic Echo
Industrial Cityscape Grey
Modern Loft Concrete