Palette

Urban Stone Facade

A robust grayscale inspired by the concrete and stone textures of a city building facade.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EAEAEA#BFBFBF#8F8F8F#5F5F5F#2F2F2F

Palette guide

How to use Urban Stone Facade

Overview

The Urban Stone Facade palette offers a robust grayscale foundation, drawing inspiration from the raw concrete and stone textures of modern city architecture. This monochrome collection, featuring shades like the bright #EAEAEA, the versatile #BFBFBF, the sturdy #8F8F8F, the deep #5F5F5F, and the commanding #2F2F2F, is ideal for projects seeking a sophisticated, minimalist aesthetic. Designers and developers can leverage its precise tonal range to create depth, structure, and a sense of enduring quality in digital and print applications, ensuring a clean and professional visual impact.

Best used for

Architectural firm websites and portfolios
High-tech product interfaces and branding
Corporate reports and professional documents
Minimalist e-commerce platforms
Fine art photography showcases
Interior design mood boards

Suggested color roles

primary

Use #5F5F5F for main content areas or substantial elements, providing a strong, grounded presence.

secondary

Employ #8F8F8F for supporting graphics, secondary navigation, or subtle dividers, offering a softer yet cohesive tone.

accent

Reserve #2F2F2F for critical calls-to-action, important icons, or to create high-impact contrast against lighter tones.

background

The lightest shade, #EAEAEA, serves as an excellent clean canvas for main backgrounds, promoting readability.

text

For optimal readability, use #2F2F2F for body text on light backgrounds like #EAEAEA, ensuring strong contrast.

Accessibility notes

Ensure #2F2F2F text on #EAEAEA background meets WCAG AA contrast standards for digital content.
Avoid placing #BFBFBF text on #8F8F8F backgrounds, as their proximity in value can lead to poor readability.
For larger headings, #5F5F5F or #8F8F8F can work well on #EAEAEA, but always check contrast ratios.
Consider using a slightly darker charcoal for very small text elements if #2F2F2F doesn't provide sufficient contrast on mid-tones.

Recommended combinations

Clean Canvas

Ideal for a crisp user interface, with light backgrounds, dark text, and a strong mid-tone for interactive elements.

#EAEAEA · #2F2F2F · #5F5F5F

Layered Depth

Create subtle visual hierarchy and depth in sections or data visualizations through varying shades of grey.

#BFBFBF · #8F8F8F · #5F5F5F

Bold Contrast

Effective for impactful headlines, call-to-action buttons, or distinct section dividers that command attention.

#2F2F2F · #EAEAEA · #BFBFBF

CSS variables

:root {
  --urban-stone-facade-1: #EAEAEA;
  --urban-stone-facade-2: #BFBFBF;
  --urban-stone-facade-3: #8F8F8F;
  --urban-stone-facade-4: #5F5F5F;
  --urban-stone-facade-5: #2F2F2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-stone-facade": {
        1: "#EAEAEA",
        2: "#BFBFBF",
        3: "#8F8F8F",
        4: "#5F5F5F",
        5: "#2F2F2F",
      }
    }
  }
}

Hex values

Color 1#EAEAEA

Color 2#BFBFBF

Color 3#8F8F8F

Color 4#5F5F5F

Color 5#2F2F2F

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5.3:1AA

11.1:1AAA

1.5:1Fail

1.8:1Fail

3.5:1AA18

7.3:1AAA

2.7:1Fail

1.8:1Fail

2:1Fail

4.1:1AA18

5.3:1AA

3.5:1AA18

2:1Fail

2.1:1Fail

11.1:1AAA

7.3:1AAA

4.1:1AA18

2.1:1Fail

Similar palettes

More like Urban Stone Facade

View all monochrome

Monochrome Granite Path