Palette

Urban Stone

Cool, muted grays reflect the raw, minimalist aesthetic of urban architecture and stone.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#707070#919191#B2B2B2#D3D3D3

Palette guide

How to use Urban Stone

Overview

The Urban Stone palette offers cool, muted grays that capture the raw, minimalist aesthetic of urban architecture and stone. With shades ranging from the deep #4F4F4F to the light #D3D3D3, and including the versatile #707070, #919191, and #B2B2B2, this palette provides a robust foundation for modern design. Designers and developers can utilize its subtle tonal shifts to create depth, structure, and a sophisticated sense of industrial elegance across digital interfaces, branding, and print materials, ensuring a clean and contemporary visual impact.

Best used for

Modern minimalist websites and portfolios
Industrial branding and marketing materials
Tech startup interfaces and product design
Urban photography showcases and art direction
Architectural rendering backgrounds and presentations
Apparel and lifestyle brand identity

Suggested color roles

primary

Use #4F4F4F as a strong, dark grey for key elements, impactful headings, or dominant sections.

secondary

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

accent

Reserve #919191, a lighter mid-grey, for subtle highlights, inactive states, or to add texture.

background

The lightest shade, #D3D3D3, provides a clean, neutral, and sophisticated canvas for content.

text

For optimal readability, #4F4F4F ensures excellent contrast on lighter backgrounds, maintaining a cohesive look.

Accessibility notes

Text in #4F4F4F on #D3D3D3 background offers good readability; verify WCAG AA compliance for digital content.
Avoid using #B2B2B2 or #919191 for small body text on #D3D3D3, as contrast may be too low.
Ensure sufficient contrast for interactive elements, especially when using #B2B2B2 or #919191 for their default states.
For very small print or legal text, consider using a true black for maximum legibility on light backgrounds.

Recommended combinations

Core UI

A balanced combination for clean user interfaces, providing clear text on a light background with a supportive mid-tone.

#D3D3D3 · #4F4F4F · #707070

Gradual Depth

Create subtle visual hierarchy and depth in background sections, cards, or layered information displays.

#B2B2B2 · #919191 · #707070

High Impact

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

#4F4F4F · #D3D3D3 · #919191

CSS variables

:root {
  --urban-stone-1: #4F4F4F;
  --urban-stone-2: #707070;
  --urban-stone-3: #919191;
  --urban-stone-4: #B2B2B2;
  --urban-stone-5: #D3D3D3;
}

Tailwind config

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

Hex values

Color 1#4F4F4F

Color 2#707070

Color 3#919191

Color 4#B2B2B2

Color 5#D3D3D3

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

3.9:1AA18

5.5:1AA

1.7:1Fail

1.6:1Fail

2.3:1Fail

3.3:1AA18

2.6:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

3.9:1AA18

2.3:1Fail

1.5:1Fail

1.4:1Fail

5.5:1AA

3.3:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Urban Stone

View all neutral

Gritty Urban Canvas

Urban Alley Canvas

Urban Concrete Jungle

City Concrete Grind

Graphite Urban Grid

Industrial Urban Grit