Palette

Pavement Abstract Greys

A study in sophisticated grays, inspired by the varied textures and tones of urban concrete and asphalt.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pavement Abstract Greys 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 Pavement Abstract Greys.

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

Data visualization

#2D2D2D#5A5A5A#8D8D8D#B0B0B0#3C3C3C

Palette guide

How to use Pavement Abstract Greys

Overview

The Pavement Abstract Greys palette is a sophisticated study in monochrome, offering a versatile range of urban-inspired tones perfect for minimalist and industrial designs. Featuring deep charcoal #2D2D2D, mid-grey #5A5A5A, and lighter grey #8D8D8D, this collection provides a strong foundation for modern aesthetics. Developers can leverage these colors to craft clean, functional user interfaces for tech companies, architectural firms, or contemporary art galleries. The very light #B0B0B0 provides a subtle contrast, while #3C3C3C offers an additional dark grey for depth, ensuring a cohesive and professional visual experience with an emphasis on structure and clarity.

Best used for

Tech and software company branding
Architectural firm websites
Industrial design portfolios
Minimalist e-commerce platforms
Urban photography showcases
Modern art gallery interfaces

Suggested color roles

primary

A deep, strong charcoal, excellent for main content, headers, and primary branding: #2D2D2D.

secondary

A versatile mid-grey, suitable for secondary sections, navigation, or subtle backgrounds: #5A5A5A.

accent

A very light grey that can serve as a subtle accent for borders, dividers, or hover states: #B0B0B0.

background

A light, neutral grey that provides a clean, modern, and easily readable canvas: #B0B0B0.

text

This deep charcoal offers excellent contrast and readability on lighter greys like #B0B0B0 or #8D8D8D: #2D2D2D.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter greys like #8D8D8D on #B0B0B0 (aim for darker text).
White text on #2D2D2D or #3C3C3C will provide excellent contrast.
Avoid using #B0B0B0 for text against #8D8D8D as contrast will be too low.
For interactive elements, ensure clear visual feedback, perhaps by darkening on hover or adding a border.

Recommended combinations

Urban Core

A strong combination for main branding, backgrounds, and clear content hierarchy.

#2D2D2D · #B0B0B0 · #5A5A5A

Layered Greys

Ideal for creating visual depth, distinct content blocks, or subtle gradient effects.

#5A5A5A · #8D8D8D · #3C3C3C

Minimal Contrast

Use for clean, modern layouts, ensuring dark text on light backgrounds for readability.

#B0B0B0 · #2D2D2D · #8D8D8D

CSS variables

:root {
  --pavement-abstract-greys-1: #2D2D2D;
  --pavement-abstract-greys-2: #5A5A5A;
  --pavement-abstract-greys-3: #8D8D8D;
  --pavement-abstract-greys-4: #B0B0B0;
  --pavement-abstract-greys-5: #3C3C3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pavement-abstract-greys": {
        1: "#2D2D2D",
        2: "#5A5A5A",
        3: "#8D8D8D",
        4: "#B0B0B0",
        5: "#3C3C3C",
      }
    }
  }
}

Hex values

Color 1#2D2D2D

Color 2#5A5A5A

Color 3#8D8D8D

Color 4#B0B0B0

Color 5#3C3C3C

Accessibility

Contrast checker

2:1Fail

4.1:1AA18

6.4:1AA

1.2:1Fail

2:1Fail

2.1:1Fail

3.2:1AA18

1.6:1Fail

4.1:1AA18

2.1:1Fail

1.5:1Fail

3.3:1AA18

6.4:1AA

3.2:1AA18

1.5:1Fail

5.1:1AA

1.2:1Fail

1.6:1Fail

3.3:1AA18

5.1:1AA

Similar palettes

More like Pavement Abstract Greys

Grayscale Metropolis Grid

Industrial Chic Echo

Industrial Cityscape Grey