Back to palettes

Palette

Urban Stone Pavement

A collection of versatile greys, reminiscent of durable stone pavements in a bustling city.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#707070#8A8A8A#A3A3A3#C0C0C0#DCDCDC

Palette guide

How to use Urban Stone Pavement

Overview

The Urban Stone Pavement palette presents a collection of versatile grays, reminiscent of durable stone pavements in a bustling city. Ranging from the solid #707070 to the light #DCDCDC, and including the nuanced #8A8A8A, #A3A3A3, and #C0C0C0, this palette is ideal for creating designs that embody strength, durability, and a clean, modern aesthetic. Designers and developers can leverage these tones to build robust interfaces, grounded branding, and a sense of minimalist efficiency across digital and physical mediums.

Best used for

  • Industrial design portfolios and presentations
  • Architectural visualizations and firm branding
  • Software application interfaces and dashboards
  • Urban planning and infrastructure project visuals
  • Construction company branding and websites
  • Modern art exhibition materials

Suggested color roles

primary

Use #707070 as a solid, dependable grey for main content areas, structural elements, or prominent text.

secondary

Employ #8A8A8A, a slightly lighter tone, for supporting information, secondary navigation, or subtle dividers.

accent

Reserve #A3A3A3 for subtle highlights, inactive states, or delicate graphic elements that require a soft touch.

background

The lightest shade, #DCDCDC, serves as a very light, clean grey backdrop, providing a versatile and neutral canvas.

text

For optimal readability, #707070 provides clear contrast against lighter background shades like #DCDCDC, ensuring legibility.

Accessibility notes

  • Text in #707070 on #DCDCDC offers good contrast for body text; verify WCAG AA compliance for digital use.
  • Avoid using #A3A3A3 or #C0C0C0 for small text on #DCDCDC as contrast will likely be insufficient for readability.
  • For UI elements, ensure sufficient contrast between #DCDCDC and #C0C0C0 for interactive states and feedback.
  • Consider using a darker charcoal or true black for very small legal or disclaimer text to ensure maximum legibility.

Recommended combinations

Subtle Layers

Ideal for creating depth in background elements, cards, or layered UI components without harsh lines.

#DCDCDC · #C0C0C0 · #A3A3A3

Text & Support

Perfect for clear content display: dark text on a light background, with a mid-tone for secondary information.

#707070 · #DCDCDC · #8A8A8A

Division & Highlight

Use for section dividers, subtle borders, or to highlight important areas with a slightly darker, more defined tone.

#8A8A8A · #707070 · #C0C0C0

CSS variables

:root {
  --urban-stone-pavement-1: #707070;
  --urban-stone-pavement-2: #8A8A8A;
  --urban-stone-pavement-3: #A3A3A3;
  --urban-stone-pavement-4: #C0C0C0;
  --urban-stone-pavement-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-stone-pavement": {
        1: "#707070",
        2: "#8A8A8A",
        3: "#A3A3A3",
        4: "#C0C0C0",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

durable gray paletteurban street colorsminimalist concrete schemeneutral industrial designlight dark grey balance

Palette colors

Hex values

Color 1#707070
·
Color 2#8A8A8A
·
Color 3#A3A3A3
·
Color 4#C0C0C0
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
2.7:1Fail
3.6:1AA18
2
1.4:1Fail
1.4:1Fail
1.9:1Fail
2.5:1Fail
3
2:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
2.7:1Fail
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
3.6:1AA18
2.5:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Urban Stone Pavement

View all neutral
Graffiti Wall Grind
City Concrete Grind
Cobblestone Street Mist
Concrete Garden Grey
Concrete Grid Lines
Concrete Jungle Bloom