Back to palettes

Palette

Urban Graphite Sketch

A series of charcoal grays, capturing the raw, textured feel of urban architecture.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5A6269#7C8287#9EA2A6#BFC2C5

Palette guide

How to use Urban Graphite Sketch

Overview

The Urban Graphite Sketch palette is a refined series of charcoal grays, capturing the raw, textured feel of urban architecture. Anchored by the deep #36454F, it progresses through #5A6269, #7C8287, #9EA2A6, and culminates in the lighter #BFC2C5. This collection is ideal for designers and developers aiming to evoke a serious, grounded, and sophisticated aesthetic. It excels in creating designs that are both modern and timeless, perfect for showcasing content with understated elegance. The subtle variations in tone allow for rich visual hierarchy without relying on high contrast or vibrant colors.

Best used for

  • Architectural renderings and websites
  • Luxury product showcases
  • Corporate and financial services branding
  • Technical documentation interfaces
  • Editorial design for art and culture
  • Minimalist portfolio sites

Suggested color roles

primary

Use #36454F (Charcoal) for dominant backgrounds, large headers, or primary brand elements to establish a strong, sophisticated tone.

secondary

Apply #5A6269 (Dark Grayish Blue) for secondary content blocks, navigation, or dividers, providing a smooth transition from the primary.

accent

Employ #7C8287 (Grayish Blue) for subtle accents, interactive elements, or iconography that requires a gentle lift from the background.

background

Utilize #BFC2C5 (Light Grayish Blue) as a clean, soft background for main content areas, ensuring excellent readability for darker text.

text

For primary body text, #36454F on #BFC2C5 offers excellent contrast. For secondary text or captions, #5A6269 works well.

Accessibility notes

  • Ensure #36454F text on #BFC2C5 background meets WCAG AA contrast for readability.
  • Be cautious with #7C8287 text on #9EA2A6 backgrounds; test contrast thoroughly for small text.
  • Use sufficient font size or bolding when using lighter grays for text, especially for headings.
  • Distinguish interactive elements with clear visual cues beyond color, such as underlines or hover states.

Recommended combinations

Deep Contrast

A strong dark base with a lighter contrast, great for headers and main content areas.

#36454F · #5A6269 · #BFC2C5

Mid-Tone Harmony

Creates a subtle, layered effect ideal for secondary UI elements or background textures.

#5A6269 · #7C8287 · #9EA2A6

Light & Readable

Provides a clean, readable combination for text heavy sections with a light background.

#36454F · #9EA2A6 · #BFC2C5

CSS variables

:root {
  --urban-graphite-sketch-1: #36454F;
  --urban-graphite-sketch-2: #5A6269;
  --urban-graphite-sketch-3: #7C8287;
  --urban-graphite-sketch-4: #9EA2A6;
  --urban-graphite-sketch-5: #BFC2C5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graphite-sketch": {
        1: "#36454F",
        2: "#5A6269",
        3: "#7C8287",
        4: "#9EA2A6",
        5: "#BFC2C5",
      }
    }
  }
}

Related searches

charcoal gray paletteurban architecture colorsmonochromatic gray designminimalist web colorssophisticated gray scheme

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A6269
·
Color 3#7C8287
·
Color 4#9EA2A6
·
Color 5#BFC2C5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.9:1AA18
5.5:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.5:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
3.9:1AA18
2.4:1Fail
1.5:1Fail
1.4:1Fail
5
5.5:1AA
3.5:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Urban Graphite Sketch

View all monochrome
Charcoal Sketch Palette
Charcoal Sketchbook Grey
Concrete Bloom Grey
Concrete Jungle Canopy
Concrete Jungle Haze
Grayscale Metropolis Grid