Back to palettes

Palette

Graphite Urban Grid

A stark, modern palette inspired by minimalist urban architecture and the raw beauty of concrete textures.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#7F8C8D#BDC3C7#ECF0F1#95A5A6

Palette guide

How to use Graphite Urban Grid

Overview

The "Graphite Urban Grid" palette is a modern and stark collection of cool, architectural greys, inspired by cityscapes and concrete textures. Ranging from the deep, commanding #2C3E50 to the bright, airy #ECF0F1, this palette, featuring versatile shades like #7F8C8D, #BDC3C7, and #95A5A6, creates a sophisticated, industrial aesthetic. Designers and developers will find this palette ideal for projects requiring a clean, structured, and contemporary feel, offering excellent versatility for creating depth and clear visual hierarchy in modern web designs, tech interfaces, or branding.

Best used for

  • Architectural and urban planning firms
  • Modern tech and software branding
  • Industrial design and manufacturing websites
  • Minimalist web applications and UI
  • City and infrastructure development projects
  • Contemporary art galleries

Suggested color roles

primary

Use #2C3E50 for strong branding, headers, or as a sophisticated dark mode interface background, ensuring impact.

secondary

Apply #7F8C8D for primary content blocks, navigation, or as a contrasting panel, offering depth.

accent

Employ #95A5A6 for subtle interactive elements, dividers, or highlights, providing a gentle visual break.

background

Utilize #ECF0F1 as a crisp, light, and modern canvas, offering excellent contrast for darker elements.

text

For primary text on light backgrounds, #2C3E50 ensures optimal readability. For dark backgrounds, #ECF0F1 is suitable.

Accessibility notes

  • High contrast between #2C3E50 and #ECF0F1 ensures excellent legibility for primary text.
  • Exercise caution when using #BDC3C7 on #ECF0F1 for essential text, as the contrast might be insufficient.
  • Always test interactive element states to ensure they are clearly distinguishable for all users.
  • Avoid placing mid-tone greys like #7F8C8D directly on similar backgrounds for critical information to prevent visual strain.

Recommended combinations

Urban Contrast

Creates a bold, clear layout with a strong dark, bright light, and a balancing mid-tone accent.

#2C3E50 · #ECF0F1 · #7F8C8D

Concrete Tones

Ideal for layered elements or subtle background textures, providing depth and a cohesive industrial feel.

#7F8C8D · #95A5A6 · #BDC3C7

Modern Base

A robust foundation with lighter content areas and a bright accent for a clean, contemporary look.

#2C3E50 · #BDC3C7 · #ECF0F1

CSS variables

:root {
  --graphite-urban-grid-1: #2C3E50;
  --graphite-urban-grid-2: #7F8C8D;
  --graphite-urban-grid-3: #BDC3C7;
  --graphite-urban-grid-4: #ECF0F1;
  --graphite-urban-grid-5: #95A5A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-urban-grid": {
        1: "#2C3E50",
        2: "#7F8C8D",
        3: "#BDC3C7",
        4: "#ECF0F1",
        5: "#95A5A6",
      }
    }
  }
}

Related searches

urban grey color paletteindustrial design colorsmodern architecture paletteconcrete aesthetic schemecool neutral color scheme

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#7F8C8D
·
Color 3#BDC3C7
·
Color 4#ECF0F1
·
Color 5#95A5A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
6.2:1AA
9.6:1AAA
4.3:1AA18
2
3.2:1AA18
2:1Fail
3:1AA18
1.4:1Fail
3
6.2:1AA
2:1Fail
1.6:1Fail
1.4:1Fail
4
9.6:1AAA
3:1AA18
1.6:1Fail
2.2:1Fail
5
4.3:1AA18
1.4:1Fail
1.4:1Fail
2.2:1Fail

Similar palettes

More like Graphite Urban Grid

View all neutral
Gritty Urban Canvas
Urban Alley Canvas
Urban Concrete Jungle
Urban Dusk Bloom
Urban Loft Dawn
Urban Stone