Back to palettes

Palette

Urban Sketchbook Ink

A refined grayscale selection mirroring the stark yet sophisticated tones of cityscapes and ink drawings.

MonochromeMinimal5 colors
More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Sketchbook Ink 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 Sketchbook Ink.

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

Data visualization

#2C2C2C#5A5A5A#8B8B8B#BFC0C2#E8E9EB

Palette guide

How to use Urban Sketchbook Ink

Overview

The Urban Sketchbook Ink palette is a refined grayscale selection mirroring the stark yet sophisticated tones of cityscapes and ink drawings. From the deep #2C2C2C to the almost-white #E8E9EB, with balanced mid-tones like #5A5A5A, #8B8B8B, and #BFC0C2, this collection offers exceptional versatility. It's ideal for designers and developers seeking a clean, minimalist, and professional aesthetic. The palette allows for crisp contrasts and subtle gradations, making it perfect for UI design, branding, or digital art where clarity, elegance, and a contemporary urban feel are paramount. Its timeless nature ensures broad applicability across various projects.

Best used for

  • Minimalist UI/UX design
  • Corporate and professional branding
  • Architectural renderings
  • Digital publication layouts
  • Clean e-commerce platforms
  • Art gallery websites

Suggested color roles

primary

#2C2C2C - A deep, authoritative shade for main backgrounds, strong headers, or foundational UI components, providing a solid anchor.

secondary

#5A5A5A - An excellent choice for secondary content blocks, subheadings, or borders, offering clear visual separation.

accent

#8B8B8B - A versatile mid-grey for subtle highlights, interactive states, or decorative elements, adding refinement.

background

#E8E9EB - A very light, near-white background for main content areas, providing a clean canvas and high contrast for dark text.

text

#2C2C2C - Ideal for body text on light backgrounds like #E8E9EB. For dark backgrounds, use #E8E9EB or white for optimal readability.

Accessibility notes

  • Ensure #2C2C2C or #5A5A5A text on #E8E9EB backgrounds meets WCAG AA contrast ratios.
  • Avoid using #BFC0C2 for small text on #8B8B8B due to potentially low contrast.
  • The darkest and lightest colors provide optimal contrast for clear visual hierarchy.
  • Thoroughly test all text and interactive elements for readability across the palette.

Recommended combinations

Deep Concrete

For robust dark themes, impactful headers, or as a sophisticated base for a modern interface.

#2C2C2C · #5A5A5A · #8B8B8B

Urban Light

Ideal for soft backgrounds, secondary content areas, or gradients that evoke light and open spaces.

#8B8B8B · #BFC0C2 · #E8E9EB

Sharp Contrast

Use for crisp typography and interactive elements, ensuring excellent readability and a clean, minimalist look.

#2C2C2C · #E8E9EB · #BFC0C2

CSS variables

:root {
  --urban-sketchbook-ink-1: #2C2C2C;
  --urban-sketchbook-ink-2: #5A5A5A;
  --urban-sketchbook-ink-3: #8B8B8B;
  --urban-sketchbook-ink-4: #BFC0C2;
  --urban-sketchbook-ink-5: #E8E9EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sketchbook-ink": {
        1: "#2C2C2C",
        2: "#5A5A5A",
        3: "#8B8B8B",
        4: "#BFC0C2",
        5: "#E8E9EB",
      }
    }
  }
}

Related searches

monochrome city paletteminimalist grey designconcrete color schemeurban sketch art colorsprofessional grayscale palette

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#5A5A5A
·
Color 3#8B8B8B
·
Color 4#BFC0C2
·
Color 5#E8E9EB
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.1:1AA18
7.7:1AAA
11.5:1AAA
2
2:1Fail
2:1Fail
3.8:1AA18
5.7:1AA
3
4.1:1AA18
2:1Fail
1.9:1Fail
2.8:1Fail
4
7.7:1AAA
3.8:1AA18
1.9:1Fail
1.5:1Fail
5
11.5:1AAA
5.7:1AA
2.8:1Fail
1.5:1Fail

Similar palettes

More like Urban Sketchbook Ink

View all Monochrome