Palette

Urban Stone Path

A refined grayscale palette capturing the understated elegance of city architecture and urban landscapes.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#707070#A9A9A9#D3D3D3#FFFFFF

Palette guide

How to use Urban Stone Path

Overview

The Urban Stone Path palette offers a refined grayscale, capturing the understated elegance of city architecture and urban landscapes. This versatile collection, featuring shades from the deep #4F4F4F to pure #FFFFFF, along with #707070, #A9A9A9, and #D3D3D3, provides a clean and sophisticated foundation for design projects. It allows designers and developers to create visual depth, structure, and a timeless aesthetic, perfect for conveying professionalism and modern minimalism across various digital and print applications.

Best used for

Elegant web design and user interfaces
Brand identity for luxury services
Photography portfolios and art gallery websites
Editorial layouts and professional publications
High-end architectural presentations
Minimalist e-commerce platforms

Suggested color roles

primary

Use #4F4F4F as a strong, sophisticated base for key elements, headlines, or dominant sections.

secondary

Employ #707070 as a versatile mid-grey for supporting content, secondary text, or subtle borders.

accent

Reserve #A9A9A9 for subtle highlights, inactive states, or delicate graphic elements, offering a gentle visual cue.

background

Pure #FFFFFF provides a crisp, clean foundation, ensuring maximum contrast and a bright, expansive feel.

text

For optimal readability, #4F4F4F provides excellent contrast against white and light grey backgrounds, perfect for body copy.

Accessibility notes

Text in #4F4F4F on #FFFFFF offers superior contrast, meeting WCAG AAA for all text sizes.
Check #707070 text on #D3D3D3 for sufficient contrast, especially for smaller font sizes, ensuring WCAG AA compliance.
Avoid using #A9A9A9 for body text on #D3D3D3 or #FFFFFF unless it's very large decorative text, due to potential low contrast.
Ensure interactive elements using #A9A9A9 have clear visual cues for focus and hover states to aid navigation.

Recommended combinations

Classic Monochrome

A timeless combination for clean interfaces, offering high readability and elegant simplicity.

#FFFFFF · #4F4F4F · #707070

Subtle Hierarchy

Create depth and organize content with a gentle gradient, ideal for background sections or cards.

#D3D3D3 · #A9A9A9 · #707070

Bold Statements

Use for prominent headings, call-to-action buttons, or to delineate important content blocks with strong contrast.

#4F4F4F · #FFFFFF · #A9A9A9

CSS variables

:root {
  --urban-stone-path-1: #4F4F4F;
  --urban-stone-path-2: #707070;
  --urban-stone-path-3: #A9A9A9;
  --urban-stone-path-4: #D3D3D3;
  --urban-stone-path-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-stone-path": {
        1: "#4F4F4F",
        2: "#707070",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#707070

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#FFFFFF

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

5.5:1AA

8.2:1AAA

1.7:1Fail

2.1:1Fail

3.3:1AA18

5:1AA

3.5:1AA18

2.1:1Fail

1.6:1Fail

2.4:1Fail

5.5:1AA

3.3:1AA18

1.6:1Fail

1.5:1Fail

8.2:1AAA

5:1AA

2.4:1Fail

1.5:1Fail

Similar palettes

More like Urban Stone Path

View all monochrome

Urban Echo Stone

Concrete Jungle Bloom

Grayscale Metropolis Grid

Monochrome City Grid

Urban Cement Edge

Urban Concrete Flow