Back to palettes

Palette

City Grid Graphite

A sleek, modern gradient of grays, representing the unadorned concrete and steel of a metropolitan canvas.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Grid Graphite 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 City Grid Graphite.

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

Data visualization

#2B2B2B#505050#7B7B7B#AFAFAF#D7D7D7

Palette guide

How to use City Grid Graphite

Overview

The City Grid Graphite palette presents a sleek, modern gradient of grays, representing the unadorned concrete and steel of a metropolitan canvas. Ranging from the deep #2B2B2B and the solid #505050, through the balanced #7B7B7B and the lighter #AFAFAF, to the soft #D7D7D7, this collection provides a sophisticated and clean aesthetic. It's an excellent choice for designers seeking a minimalist, urban, or architectural feel. This palette conveys clarity, precision, and a timeless quality, perfect for projects that value clean lines, strong typography, and a refined visual identity that can serve as a backdrop for vibrant content or stand alone.

Best used for

  • Modern tech company websites and apps
  • Architectural and engineering firm branding
  • Urban photography and art showcases
  • Industrial product design and packaging
  • Minimalist fashion lookbooks
  • Data visualization dashboards

Suggested color roles

primary

Use #2B2B2B as a strong primary for backgrounds or structural elements, providing a deep, anchoring foundation for your design.

secondary

Employ #505050 for secondary content areas, navigation, or large typography, offering a robust yet sophisticated presence.

accent

Apply #7B7B7B for subtle accents, borders, or interactive states where a mid-tone gray provides gentle emphasis.

background

Utilize #D7D7D7 as a clean, bright background for main content areas, ensuring excellent readability for darker text.

text

For text on darker backgrounds, use #D7D7D7 or a crisp white. For lighter backgrounds, #2B2B2B or a deep charcoal offers optimal contrast and readability.

Accessibility notes

  • Ensure sufficient contrast when pairing light grays like #AFAFAF or #D7D7D7 with lighter text; always use dark text.
  • Avoid using #7B7B7B for small text on backgrounds of similar luminance to maintain readability.
  • The darkest shades, #2B2B2B and #505050, provide excellent contrast for white or light grey text.
  • Check contrast ratios for all text and interactive elements, especially when using mid-range grays to ensure WCAG AA compliance.

Recommended combinations

Graphite Core

Creates a strong, modern base, excellent for dark mode interfaces or clean, professional layouts.

#2B2B2B · #505050 · #D7D7D7

Grid Layers

Ideal for subtle gradients or layered effects that add depth and a refined, architectural feel to designs.

#505050 · #7B7B7B · #AFAFAF

Urban Clarity

Provides a bright, minimalist look suitable for main content areas, allowing for clear hierarchy and readability with a strong anchor.

#D7D7D7 · #AFAFAF · #2B2B2B

CSS variables

:root {
  --city-grid-graphite-1: #2B2B2B;
  --city-grid-graphite-2: #505050;
  --city-grid-graphite-3: #7B7B7B;
  --city-grid-graphite-4: #AFAFAF;
  --city-grid-graphite-5: #D7D7D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-grid-graphite": {
        1: "#2B2B2B",
        2: "#505050",
        3: "#7B7B7B",
        4: "#AFAFAF",
        5: "#D7D7D7",
      }
    }
  }
}

Related searches

graphite grey color palettemodern minimalist urbanarchitectural grey schemesleek monochrome designdark neutral palette

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#505050
·
Color 3#7B7B7B
·
Color 4#AFAFAF
·
Color 5#D7D7D7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
6.5:1AA
9.8:1AAA
2
1.8:1Fail
1.9:1Fail
3.7:1AA18
5.6:1AA
3
3.3:1AA18
1.9:1Fail
1.9:1Fail
2.9:1Fail
4
6.5:1AA
3.7:1AA18
1.9:1Fail
1.5:1Fail
5
9.8:1AAA
5.6:1AA
2.9:1Fail
1.5:1Fail

Similar palettes

More like City Grid Graphite

View all monochrome
City Loft Grey
Urban Art Mural
Urban Industrial Echo
Urban Zen Structure
Architectural Grid Hues
Art Gallery Minimal