Palette

Urban Graphite

A sleek, gradient scale of urban grays, reminiscent of architectural concrete and modern cityscapes.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F0F0#BFBFBF#8F8F8F#5F5F5F#2F2F2F

Palette guide

How to use Urban Graphite

Overview

The Urban Graphite palette is a sleek gradient scale of urban grays, reminiscent of architectural concrete and modern cityscapes. Spanning from the bright #F0F0F0 to the deep #2F2F2F, with versatile mid-tones like #BFBFBF, #8F8F8F, and #5F5F5F, this collection is perfect for designers and developers seeking a clean, industrial, and highly functional aesthetic. Its monochromatic nature ensures visual harmony across all elements, making it ideal for minimalist UIs, corporate branding, or any project that benefits from a professional and uncluttered appearance, effectively conveying modernity and sophistication.

Best used for

Modern corporate identity
Minimalist user interfaces (UI)
Industrial product websites
Architectural firm branding
Sleek mobile application design
Data visualization dashboards

Suggested color roles

primary

Use #2F2F2F (Dark Gray) for dominant elements, strong headers, or primary branding to establish a solid, authoritative presence.

secondary

Apply #5F5F5F (Medium Dark Gray) for supporting content blocks, navigation, or dividers, offering a clear but subtle separation.

accent

Employ #8F8F8F (Gray) for interactive elements, icons, or subtle highlights that need to stand out without being overly bold.

background

Utilize #F0F0F0 (Near White) as a clean, bright background for main content areas, ensuring excellent readability and an airy feel.

text

For primary text on light backgrounds, #2F2F2F offers superb readability. For secondary text or captions, #5F5F5F works effectively.

Accessibility notes

Ensure #2F2F2F text on #F0F0F0 background meets WCAG AA contrast for body text.
Be cautious with #8F8F8F text on #BFBFBF backgrounds; test contrast thoroughly for small text.
Use sufficient font size or bolding when using lighter grays for text, especially for headings.
Maintain clear visual hierarchy by varying shades appropriately to distinguish interactive elements.

Recommended combinations

High Contrast

Excellent for primary text, headers, and backgrounds, providing strong readability and a clean look.

#2F2F2F · #5F5F5F · #F0F0F0

Mid-Tone Layers

Creates subtle depth and visual hierarchy for UI components or layered content panels.

#5F5F5F · #8F8F8F · #BFBFBF

Light & Airy

Ideal for a predominantly light design, using darker grays for subtle accents and text.

#F0F0F0 · #BFBFBF · #8F8F8F

CSS variables

:root {
  --urban-graphite-1: #F0F0F0;
  --urban-graphite-2: #BFBFBF;
  --urban-graphite-3: #8F8F8F;
  --urban-graphite-4: #5F5F5F;
  --urban-graphite-5: #2F2F2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graphite": {
        1: "#F0F0F0",
        2: "#BFBFBF",
        3: "#8F8F8F",
        4: "#5F5F5F",
        5: "#2F2F2F",
      }
    }
  }
}

Hex values

Color 1#F0F0F0

Color 2#BFBFBF

Color 3#8F8F8F

Color 4#5F5F5F

Color 5#2F2F2F

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

5.6:1AA

11.7:1AAA

1.6:1Fail

1.8:1Fail

3.5:1AA18

7.3:1AAA

2.8:1Fail

1.8:1Fail

2:1Fail

4.1:1AA18

5.6:1AA

3.5:1AA18

2:1Fail

2.1:1Fail

11.7:1AAA

7.3:1AAA

4.1:1AA18

2.1:1Fail

Similar palettes

More like Urban Graphite