Palette

Grayscale Urban Sketch

A muted range of cool greys and off-whites, depicting the raw, textured essence of an urban concrete landscape.

Monochromeminimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grayscale Urban Sketch 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 Grayscale Urban Sketch.

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

Data visualization

#2C3E50#7F8C8D#BCCDCF#ECF0F1#34495E

Palette guide

How to use Grayscale Urban Sketch

Overview

The Grayscale Urban Sketch palette presents a muted range of cool greys and off-whites, depicting the raw, textured essence of an urban concrete landscape. This collection stands out with its slightly desaturated blues, like the deep #2C3E50 and #34495E, complemented by the lighter, cool greys of #7F8C8D, #BCCDCF, and the near-white #ECF0F1. Designers and developers can leverage this palette to create minimalist, modern, and atmospheric interfaces that evoke a sense of calm and sophistication. It's ideal for projects seeking a unique take on grayscale, adding a subtle coolness without introducing strong color.

Best used for

Modern architectural portfolios
Digital art and illustration showcases
Urban photography websites
Minimalist app interfaces with a cool tone
Editorial designs for contemporary publications
Branding for design-focused tech companies

Suggested color roles

primary

Use #2C3E50 for strong headers, primary navigation, or prominent UI elements, establishing a deep, cool anchor.

secondary

Apply #34495E for content backgrounds, subheadings, or secondary buttons, maintaining a consistent deep, cool tone.

accent

#BCCDCF or #ECF0F1 can serve as subtle accents for borders, dividers, or interactive states, providing lightness and clarity.

background

#ECF0F1 provides a very clean, near-white canvas. For a slightly moodier backdrop, #BCCDCF works well.

text

For primary text, #2C3E50 offers excellent readability on light backgrounds. On darker greys, use #ECF0F1 or white.

Accessibility notes

Ensure #2C3E50 text on #ECF0F1 background meets WCAG AA contrast for body text.
Be cautious when using #7F8C8D text on #BCCDCF background; contrast might be insufficient for small text.
Provide clear visual indicators for interactive elements beyond subtle color shifts, such as underlines or icons.
Use ample line height and clear typography to enhance readability in this cool grayscale palette.

Recommended combinations

Concrete Base

Ideal for primary UI, combining a deep cool grey with a near-white background and a balanced mid-tone for text.

#2C3E50 · #ECF0F1 · #7F8C8D

Sketch Layers

Excellent for creating subtle depth and hierarchy within content blocks or complex data visualizations.

#7F8C8D · #BCCDCF · #34495E

Misty Street

Suited for light-themed designs, using the palest tone as a background with dark text and a cool mid-grey for accents.

#ECF0F1 · #2C3E50 · #BCCDCF

CSS variables

:root {
  --grayscale-urban-sketch-1: #2C3E50;
  --grayscale-urban-sketch-2: #7F8C8D;
  --grayscale-urban-sketch-3: #BCCDCF;
  --grayscale-urban-sketch-4: #ECF0F1;
  --grayscale-urban-sketch-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-urban-sketch": {
        1: "#2C3E50",
        2: "#7F8C8D",
        3: "#BCCDCF",
        4: "#ECF0F1",
        5: "#34495E",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#7F8C8D

Color 3#BCCDCF

Color 4#ECF0F1

Color 5#34495E

Accessibility

Contrast checker

3.2:1AA18

6.7:1AA

9.6:1AAA

1.2:1Fail

3.2:1AA18

2.1:1Fail

3:1AA18

2.7:1Fail

6.7:1AA

2.1:1Fail

1.4:1Fail

5.6:1AA

9.6:1AAA

3:1AA18

1.4:1Fail

8.1:1AAA

1.2:1Fail

2.7:1Fail

5.6:1AA

8.1:1AAA

Similar palettes

More like Grayscale Urban Sketch

View all Monochrome

Industrial Gear Grind

Asteroid Field Drift

Geometric Noir Still

Minimalist Loft Whites

Monochrome Cityscape

Monochrome Slate