Back to palettes

Palette

Monochrome City Sketch

Shades of charcoal and ash create a minimalist interpretation of an architectural city drawing.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome City 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 Monochrome City Sketch.

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

Data visualization

#1F1F1F#3B3B3B#5A5A5A#7D7D7D#9C9C9C

Palette guide

How to use Monochrome City Sketch

Overview

The "Monochrome City Sketch" palette offers a minimalist interpretation of an architectural drawing, utilizing a gradient of charcoal and ash shades. From the deep #1F1F1F to the lighter #9C9C9C, including #3B3B3B, #5A5A5A, and #7D7D7D, this collection provides a sophisticated and understated aesthetic. It's an excellent choice for designers and developers aiming to create serene, modern, and clean digital experiences. The subtle shifts in tone allow for effective visual hierarchy and a sense of quiet urbanity, making it ideal for projects that require a sleek, contemporary feel with a touch of artistic flair. Explore this palette for impactful and refined designs.

Best used for

  • Architectural firm portfolios
  • Art and design studio websites
  • Minimalist app interfaces
  • Luxury product landing pages
  • Urban exploration blogs
  • Professional presentation templates

Suggested color roles

primary

Use #1F1F1F as a dominant background or for strong headers, providing a deep, sophisticated anchor.

secondary

Apply #3B3B3B or #5A5A5A for secondary panels, navigation, or card backgrounds, offering subtle differentiation.

accent

Utilize #7D7D7D or #9C9C9C for subtle highlights, interactive elements, or icons, providing gentle contrast.

background

Employ #1F1F1F or #3B3B3B for a deep, immersive background, or #9C9C9C for a lighter primary content area.

text

For dark backgrounds, use #9C9C9C or white for body text. For lighter backgrounds like #9C9C9C, use #1F1F1F or #3B3B3B for text.

Accessibility notes

  • Ensure high contrast between #1F1F1F text and #9C9C9C backgrounds (or vice-versa) for readability.
  • Avoid pairing #5A5A5A with #7D7D7D for small text; the contrast might be insufficient.
  • When using #9C9C9C as text on a darker background, verify it meets WCAG AA standards.
  • Test all text-background pairings with accessibility tools, especially for interactive components.

Recommended combinations

Sketch Base

Ideal for a dark theme: #1F1F1F as background, #9C9C9C for main text, and #3B3B3B for secondary elements or borders.

#1F1F1F · #9C9C9C · #3B3B3B

Tonal Depth

Creates subtle depth for layered UI components, such as cards on a background, with slight tonal shifts.

#3B3B3B · #5A5A5A · #7D7D7D

Clean Read

Use #1F1F1F for headings, #5A5A5A for subheadings, and #9C9C9C as a background for clean, legible content.

#1F1F1F · #5A5A5A · #9C9C9C

CSS variables

:root {
  --monochrome-city-sketch-1: #1F1F1F;
  --monochrome-city-sketch-2: #3B3B3B;
  --monochrome-city-sketch-3: #5A5A5A;
  --monochrome-city-sketch-4: #7D7D7D;
  --monochrome-city-sketch-5: #9C9C9C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-city-sketch": {
        1: "#1F1F1F",
        2: "#3B3B3B",
        3: "#5A5A5A",
        4: "#7D7D7D",
        5: "#9C9C9C",
      }
    }
  }
}

Related searches

charcoal grey color schememonochromatic sketch paletteurban grey hex codesminimalist grey designarchitectural monochrome

Palette colors

Hex values

Color 1#1F1F1F
·
Color 2#3B3B3B
·
Color 3#5A5A5A
·
Color 4#7D7D7D
·
Color 5#9C9C9C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
4:1AA18
6:1AA
2
1.5:1Fail
1.6:1Fail
2.7:1Fail
4.1:1AA18
3
2.4:1Fail
1.6:1Fail
1.7:1Fail
2.5:1Fail
4
4:1AA18
2.7:1Fail
1.7:1Fail
1.5:1Fail
5
6:1AA
4.1:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Monochrome City Sketch

View all monochrome
Concrete Jungle Bloom
Grayscale Metropolis Grid
Urban Concrete Jungle
Urban Concrete Sky
Urban Grid Rhythm
Charcoal Sketch Palette