Back to palettes

Palette

Urban Stone Facade

Reflects the cool, sturdy tones of modern urban architecture and natural stone facades, representing concrete strength.

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

#3A3B3C#5A5B5C#7A7B7C#9A9B9C#BABBBC

Palette guide

How to use Urban Stone Facade

Overview

The Urban Stone Facade palette reflects the cool, sturdy tones of modern urban architecture and natural stone, embodying concrete strength. This monochrome collection ranges from the deep, solid #3A3B3C, through the robust mid-tones of #5A5B5C, #7A7B7C, and #9A9B9C, to the light, foundational #BABBBC. It's an excellent choice for designers and developers seeking to convey stability, modernity, and a minimalist aesthetic. Each hex code contributes to a coherent and professional visual experience, perfect for applications, branding, or editorial content that requires a clean, strong, and timeless feel. This palette delivers a sense of robust elegance and contemporary simplicity.

Best used for

  • Construction companies and contractors
  • Architectural portfolios and firm branding
  • Industrial product design and engineering
  • Urban planning and development websites
  • Minimalist interior design concepts
  • Design studios and creative agencies

Suggested color roles

primary

#3A3B3C - A deep, commanding charcoal, ideal for dominant branding elements, robust headers, or foundational UI components.

secondary

#5A5B5C - A strong mid-tone for subheadings, navigation menus, or card backgrounds, offering excellent contrast and visual weight.

accent

#7A7B7C - Use sparingly for subtle highlights, interactive states, or delicate decorative lines, adding a touch of refined sophistication.

background

#BABBBC - A light, cool grey backdrop, reminiscent of natural stone, providing a clean and inviting canvas for content.

text

#3A3B3C or a deep charcoal for primary body text on light backgrounds, ensuring optimal readability. For dark backgrounds, #BABBBC or white offers clear contrast.

Accessibility notes

  • Ensure sufficient contrast between #3A3B3C text and #BABBBC background for WCAG AA compliance.
  • Avoid using #9A9B9C or #7A7B7C for small text on #BABBBC backgrounds due to potential low contrast.
  • Clearly define focus and hover states for interactive elements using a distinct outline or subtle shade adjustment.
  • Always use a contrast checker to validate combinations, especially for critical information and interactive components.

Recommended combinations

Stone Depth

High-contrast pairing for strong headlines, clean backgrounds, and a supportive mid-tone for secondary content.

#3A3B3C · #BABBBC · #5A5B5C

Facade Layers

Creates a harmonious, layered grey effect, ideal for subtle gradients, cards, or visual depth in UI elements.

#5A5B5C · #7A7B7C · #9A9B9C

Concrete Contrast

Strong base with a light canvas and a subtle accent for interactive elements or delicate dividers, creating a sleek look.

#3A3B3C · #BABBBC · #7A7B7C

CSS variables

:root {
  --urban-stone-facade-2-1: #3A3B3C;
  --urban-stone-facade-2-2: #5A5B5C;
  --urban-stone-facade-2-3: #7A7B7C;
  --urban-stone-facade-2-4: #9A9B9C;
  --urban-stone-facade-2-5: #BABBBC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-stone-facade-2": {
        1: "#3A3B3C",
        2: "#5A5B5C",
        3: "#7A7B7C",
        4: "#9A9B9C",
        5: "#BABBBC",
      }
    }
  }
}

Related searches

concrete grey palettestone facade colorsurban architecture schemeindustrial monochromesturdy design tones

Palette colors

Hex values

Color 1#3A3B3C
·
Color 2#5A5B5C
·
Color 3#7A7B7C
·
Color 4#9A9B9C
·
Color 5#BABBBC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4:1AA18
5.8:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.5:1AA18
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
4:1AA18
2.4:1Fail
1.5:1Fail
1.4:1Fail
5
5.8:1AA
3.5:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Urban Stone Facade

View all monochrome
Concrete Bloom Grey
Concrete Jungle Haze
Pavement Abstract Greys
Urban Alley Glow
City Grayscale View
City Steel Gleam