Palette

Urban Stone Path

A sophisticated spectrum of grays reflecting urban architecture and sleek design.

neutralminimal5 colors

More neutral 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

#36454F#78878B#A9B2B6#D3D7D9#ECEFF1

Palette guide

How to use Urban Stone Path

Overview

The Urban Stone Path palette offers a sophisticated spectrum of cool grays, reflecting the understated elegance of urban architecture and sleek modern design. With shades ranging from the deep #36454F to the bright #ECEFF1, and including versatile tones like #78878B, #A9B2B6, and #D3D7D9, this palette provides a robust foundation for creating clean, professional, and contemporary visuals. Designers and developers can utilize its nuanced transitions to build interfaces and branding that evoke strength, precision, and a minimalist aesthetic.

Best used for

Corporate and tech brand identity
Modern web and mobile application UI
Editorial design for luxury publications
Automotive industry marketing materials
High-end product packaging
Interior design concepts with a minimalist focus

Suggested color roles

primary

Use #36454F as a deep, anchoring base for main content areas, headers, or strong graphical elements.

secondary

Employ #78878B for supporting content, secondary navigation, or subtle background differentiation.

accent

The lighter #A9B2B6 works well for subtle highlights, inactive states, or delicate borders, offering a gentle contrast.

background

The lightest shade, #ECEFF1, serves as an excellent soft, clean backdrop, promoting readability and a spacious feel.

text

For optimal readability, use #36454F for body text on light backgrounds like #ECEFF1, ensuring strong, clear contrast.

Accessibility notes

Ensure #36454F text on #ECEFF1 background meets WCAG AA contrast standards for digital content.
Be cautious when using #A9B2B6 text on #D3D7D9 or #78878B backgrounds, as contrast might be insufficient for readability.
For larger text, #78878B can work on #ECEFF1, but always verify legibility for smaller sizes.
Provide clear visual cues for interactive elements, especially if using lighter shades like #C7CAC9 for their default state.

Recommended combinations

Base & Highlight

Creates a clean user interface with a light background, dark text, and a subtle accent for interactive elements.

#ECEFF1 · #36454F · #A9B2B6

Depth & Texture

Ideal for layered sections, background variations, or subtle differentiation in data visualizations, creating visual depth.

#78878B · #A9B2B6 · #D3D7D9

Strong Contrast

Effective for prominent headings, primary call-to-action buttons, or distinct elements that require high visibility.

#36454F · #ECEFF1 · #78878B

CSS variables

:root {
  --urban-stone-path-2-1: #36454F;
  --urban-stone-path-2-2: #78878B;
  --urban-stone-path-2-3: #A9B2B6;
  --urban-stone-path-2-4: #D3D7D9;
  --urban-stone-path-2-5: #ECEFF1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-stone-path-2": {
        1: "#36454F",
        2: "#78878B",
        3: "#A9B2B6",
        4: "#D3D7D9",
        5: "#ECEFF1",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#78878B

Color 3#A9B2B6

Color 4#D3D7D9

Color 5#ECEFF1

Accessibility

Contrast checker

2.7:1Fail

4.6:1AA

6.8:1AA

8.6:1AAA

2.7:1Fail

1.7:1Fail

2.6:1Fail

3.2:1AA18

4.6:1AA

1.7:1Fail

1.5:1Fail

1.9:1Fail

6.8:1AA

2.6:1Fail

1.5:1Fail

1.3:1Fail

8.6:1AAA

3.2:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Urban Stone Path

View all neutral

Concrete Grid Lines

Concrete Loft Living

Industrial Loft Concrete

Urban Loft Echo

Bare Concrete Stillness

Brutalist Bloom Grey