Palette

Urban Sketch Grey

A sophisticated range of greys, reminiscent of cityscapes and minimalist design, offering understated elegance.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#A9A9A9#C0C0C0#696969

Palette guide

How to use Urban Sketch Grey

Overview

The Urban Sketch Grey palette offers a sophisticated range of greys, reminiscent of minimalist cityscapes and architectural drawings. With foundational shades like #36454F and #696969, and lighter tones such as #A9A9A9 and #C0C0C0, this palette provides understated elegance. It's perfect for designers and developers seeking a clean, modern aesthetic that emphasizes structure and clarity. The inclusion of #708090 adds a subtle mid-tone depth, making it versatile for both primary UI elements and subtle background textures. This palette ensures a sleek, professional look that is both timeless and contemporary.

Best used for

Architectural firm branding
Minimalist website design
Corporate presentations
Sleek product interfaces
Urban planning visualizations
Fashion e-commerce platforms

Suggested color roles

primary

#36454F - A strong, dark grey for main content areas, headers, or a sophisticated background, providing a solid anchor.

secondary

#696969 - An excellent choice for secondary navigation, subheadings, or borders, offering a subtle distinction.

accent

#A9A9A9 - A lighter grey ideal for subtle highlights, active states, or graphic elements that need to stand out gently.

background

#C0C0C0 - A soft, light grey that serves as a clean, unobtrusive background for content, allowing darker elements to pop.

text

#36454F - Highly readable for body text on lighter backgrounds like #C0C0C0 or white. For dark backgrounds, use white or near-white.

Accessibility notes

Ensure #36454F or #696969 text on #C0C0C0 or #A9A9A9 backgrounds meets WCAG contrast standards.
Avoid using #A9A9A9 for small text on #C0C0C0; contrast may be too low.
The darkest shades provide good contrast with the lightest shades for clear hierarchy.
Regularly test contrast ratios for all text and interactive components.

Recommended combinations

Deep Urban

For strong, modern themes, primary UI elements, or as a sophisticated base for a dark mode interface.

#36454F · #696969 · #708090

Soft Sketch

Ideal for subtle background textures, secondary content areas, or gradients that evoke a soft, overcast sky.

#708090 · #A9A9A9 · #C0C0C0

Clean Contrast

Use for clear typography and interactive elements on light backgrounds, ensuring excellent readability and visual hierarchy.

#36454F · #C0C0C0 · #A9A9A9

CSS variables

:root {
  --urban-sketch-grey-1: #36454F;
  --urban-sketch-grey-2: #708090;
  --urban-sketch-grey-3: #A9A9A9;
  --urban-sketch-grey-4: #C0C0C0;
  --urban-sketch-grey-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sketch-grey": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#696969

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

5.4:1AA

1.8:1Fail

2.4:1Fail

1.7:1Fail

2.2:1Fail

1.4:1Fail

4.2:1AA18

1.7:1Fail

1.3:1Fail

2.3:1Fail

5.4:1AA

2.2:1Fail

1.3:1Fail

3:1AA18

1.8:1Fail

1.4:1Fail

2.3:1Fail

3:1AA18

Similar palettes

More like Urban Sketch Grey

Architectural Grid Hues

City Grid Graphite

City Loft Grey