Back to palettes

Palette

Urban Concrete Calm

A modern and sleek grayscale palette inspired by urban architecture and industrial materials.

MonochromeMinimal5 colors
More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#212121#424242#616161#9E9E9E#BDBDBD

Palette guide

How to use Urban Concrete Calm

Overview

The Urban Concrete Calm palette is a sleek, monochromatic grayscale inspired by urban architecture and industrial materials, offering a modern and refined aesthetic. This palette provides a robust foundation for designs that prioritize clarity, minimalism, and timeless appeal. It features a deep charcoal `#212121`, a strong dark gray `#424242`, and a versatile medium gray `#616161`. Completing the spectrum are a lighter medium gray `#9E9E9E` and a clean light gray `#BDBDBD`. This collection is perfect for creating a sophisticated, structured, and inherently calm visual experience across various applications, from digital interfaces to print.

Best used for

  • Industrial design portfolios
  • Tech dashboards and interfaces
  • Architectural visualization projects
  • Minimalist branding and logos
  • Photography websites (black & white focus)
  • Urban-themed editorial content

Suggested color roles

primary

Use `#212121` as a dominant, grounding color for headlines, main navigation, or strong graphic elements to establish a powerful presence.

secondary

Apply `#424242` for body text, subheadings, or larger background sections, offering robust support without being too stark.

accent

Introduce `#9E9E9E` for subtle highlights, interactive elements, or to create visual breaks, adding a touch of lightness.

background

Utilize `#BDBDBD` for clean, expansive backgrounds, providing a subtle and sophisticated canvas that enhances readability.

text

For dark text on light backgrounds, `#212121` offers optimal readability. For light text on darker elements, a crisp white or a lighter gray like `#9E9E9E` works well.

Accessibility notes

  • Ensure `#212121` text on `#BDBDBD` background meets WCAG contrast standards for body text.
  • Verify that `#424242` text on `#BDBDBD` also maintains sufficient contrast for readability.
  • Avoid using `#9E9E9E` or `#BDBDBD` for small text elements against very light backgrounds due to potential low contrast.
  • When using multiple light grays, ensure enough visual distinction between them for users with low vision.

Recommended combinations

Monochrome Core

Ideal for a strong, minimalist website structure, providing clear hierarchy with dark elements on a light, clean background.

#212121 · #424242 · #BDBDBD

Industrial Gradients

Excellent for backgrounds, overlays, or graphic elements that require a smooth, subtle gradient effect, evoking concrete textures.

#BDBDBD · #9E9E9E · #616161

Sleek Accents

Perfect for headings, icons, and interactive elements, offering strong contrast and a modern, polished aesthetic.

#212121 · #9E9E9E · #616161

CSS variables

:root {
  --urban-concrete-calm-1: #212121;
  --urban-concrete-calm-2: #424242;
  --urban-concrete-calm-3: #616161;
  --urban-concrete-calm-4: #9E9E9E;
  --urban-concrete-calm-5: #BDBDBD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-calm": {
        1: "#212121",
        2: "#424242",
        3: "#616161",
        4: "#9E9E9E",
        5: "#BDBDBD",
      }
    }
  }
}

Related searches

modern grayscale paletteindustrial grey colorsconcrete monochromesleek urban designdark grey aesthetic

Palette colors

Hex values

Color 1#212121
·
Color 2#424242
·
Color 3#616161
·
Color 4#9E9E9E
·
Color 5#BDBDBD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
6:1AA
8.6:1AAA
2
1.6:1Fail
1.6:1Fail
3.8:1AA18
5.3:1AA
3
2.6:1Fail
1.6:1Fail
2.3:1Fail
3.3:1AA18
4
6:1AA
3.8:1AA18
2.3:1Fail
1.4:1Fail
5
8.6:1AAA
5.3:1AA
3.3:1AA18
1.4:1Fail

Similar palettes

More like Urban Concrete Calm

View all Monochrome
Industrial Echo Wall
Grayscale Stone Etch
Gritty Urban Canvas
Industrial Edge Grey
Abstract Urban Canvas
Aged Stone Reverie