Palette

Urban Graphite Soul

A raw and sophisticated monochromatic palette, capturing the stark beauty of city concrete and steel.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#A9A9A9#778899#663300#1E1E1E

Palette guide

How to use Urban Graphite Soul

Overview

The Urban Graphite Soul palette delivers a raw and sophisticated monochromatic experience, capturing the stark beauty of city concrete and steel. Featuring deep tones like #1E1E1E and #36454F, balanced with a unique earthy #663300, and softened by #A9A9A9 and #778899, this palette is ideal for designers and developers aiming for a grounded yet modern aesthetic. Its diverse range of darks and mid-tones allows for rich textural depth and compelling visual narratives, perfect for projects that require a serious, industrial, or artistic mood while maintaining a contemporary edge.

Best used for

Art gallery websites
Industrial design portfolios
Luxury automotive branding
Dark-themed digital interfaces
Avant-garde fashion editorial
Photography exhibition layouts

Suggested color roles

primary

Use #1E1E1E (Very Dark Gray) for dominant backgrounds or headers to establish a powerful, deep foundation and a sense of gravity.

secondary

Apply #36454F (Charcoal) for secondary content blocks, panels, or large text areas, offering a softer, yet still impactful, dark tone.

accent

Employ #663300 (Dark Brown) as a unique, warm accent for interactive elements, calls-to-action, or subtle brand highlights.

background

Utilize #A9A9A9 (Dark Gray) as a versatile background for sections where a lighter, but still muted, base is desired for content.

text

For primary text on dark backgrounds, #A9A9A9 or a pure white offers excellent readability. On lighter backgrounds like #A9A9A9, use #1E1E1E or #36454F.

Accessibility notes

Ensure #A9A9A9 text on #1E1E1E background meets WCAG AAA contrast ratios for body text.
Carefully check contrast for #778899 text on #A9A9A9 backgrounds; may require larger font sizes.
The #663300 accent color should have sufficient contrast when used for text or interactive elements.
Avoid using #A9A9A9 for small text on #778899 as contrast might be insufficient for accessibility.

Recommended combinations

Deep & Earthy

Creates a rich, grounded feel, excellent for background layers with a warm, subtle accent.

#1E1E1E · #36454F · #663300

Balanced Contrast

Offers a balanced set of grays for content hierarchy and a clean, readable layout.

#36454F · #778899 · #A9A9A9

Industrial Flair

Combines deep darks with a bright mid-tone and a distinctive accent for a modern industrial look.

#1E1E1E · #A9A9A9 · #663300

CSS variables

:root {
  --urban-graphite-soul-1: #36454F;
  --urban-graphite-soul-2: #A9A9A9;
  --urban-graphite-soul-3: #778899;
  --urban-graphite-soul-4: #663300;
  --urban-graphite-soul-5: #1E1E1E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graphite-soul": {
        1: "#36454F",
        2: "#A9A9A9",
        3: "#778899",
        4: "#663300",
        5: "#1E1E1E",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#A9A9A9

Color 3#778899

Color 4#663300

Color 5#1E1E1E

Accessibility

Contrast checker

4.2:1AA18

2.7:1Fail

1:1Fail

1.7:1Fail

4.2:1AA18

1.5:1Fail

4.4:1AA18

7.1:1AAA

2.7:1Fail

1.5:1Fail

2.8:1Fail

4.6:1AA

1:1Fail

4.4:1AA18

2.8:1Fail

1.6:1Fail

1.7:1Fail

7.1:1AAA

4.6:1AA

1.6:1Fail

Similar palettes

More like Urban Graphite Soul

Industrial Cityscape Grey

Industrial Steam Punk