Back to palettes

Palette

Modern Loft Concrete

Cool, stark greys reflecting the clean, minimalist aesthetic of a contemporary urban loft.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Modern Loft Concrete 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 Modern Loft Concrete.

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

Data visualization

#383D3B#5A625E#818B86#AFB4AE#D9DEDC

Palette guide

How to use Modern Loft Concrete

Overview

The Modern Loft Concrete palette embodies the clean, minimalist aesthetic of a contemporary urban loft, featuring a range of cool, stark greys. This monochrome collection includes the deep charcoal #383D3B, a mid-tone slate #5A625E, a balanced grey #818B86, a lighter silver #AFB4AE, and a very light concrete #D9DEDC. It's perfectly suited for designs that aim for industrial chic, modern sophistication, and a sense of calm strength. Ideal for architectural portfolios, tech companies, minimalist product design, or any project requiring a sleek, understated, and professional visual identity. Designers will find these greys highly versatile.

Best used for

  • Architectural and interior design portfolios
  • Industrial product branding
  • Minimalist website layouts
  • Urban photography backdrops
  • Tech and software company branding
  • Modern furniture design

Suggested color roles

primary

Use #383D3B as a strong, grounding primary for headers or deep background sections, setting a sophisticated tone.

secondary

Employ #5A625E for prominent content blocks, navigation, or as a dominant secondary shade, maintaining depth.

accent

Highlight subtle details or interactive elements with #AFB4AE for a gentle, yet distinct contrast.

background

The light #D9DEDC serves as an excellent soft background, providing a clean, airy canvas for content.

text

For body text, use #383D3B or #5A625E for optimal readability on lighter backgrounds. On darker elements, a crisp white or #D9DEDC provides excellent contrast.

Accessibility notes

  • Ensure #818B86 provides sufficient contrast for text when used over #AFB4AE; consider larger font sizes.
  • Use #D9DEDC for text on #383D3B or #5A625E backgrounds to meet WCAG AA contrast standards.
  • Avoid using #AFB4AE for small text on #D9DEDC backgrounds due to low contrast.
  • This monochrome palette demands careful contrast checks between adjacent grey shades, especially for text.

Recommended combinations

Concrete Base

A strong, grounded base with a light accent, perfect for modern UI layouts.

#383D3B · #5A625E · #D9DEDC

Industrial Depth

Creates subtle gradients and layers, ideal for backgrounds or sophisticated graphical elements.

#818B86 · #AFB4AE · #5A625E

Minimalist Contrast

Provides a clean, light canvas with dark anchors for text and key visual elements.

#D9DEDC · #383D3B · #818B86

CSS variables

:root {
  --modern-loft-concrete-1: #383D3B;
  --modern-loft-concrete-2: #5A625E;
  --modern-loft-concrete-3: #818B86;
  --modern-loft-concrete-4: #AFB4AE;
  --modern-loft-concrete-5: #D9DEDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modern-loft-concrete": {
        1: "#383D3B",
        2: "#5A625E",
        3: "#818B86",
        4: "#AFB4AE",
        5: "#D9DEDC",
      }
    }
  }
}

Related searches

modern grey color paletteindustrial chic colorsminimalist concrete schemeurban neutral palettecool grey web design

Palette colors

Hex values

Color 1#383D3B
·
Color 2#5A625E
·
Color 3#818B86
·
Color 4#AFB4AE
·
Color 5#D9DEDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
5.2:1AA
8.1:1AAA
2
1.8:1Fail
1.8:1Fail
3:1Fail
4.6:1AA
3
3.1:1AA18
1.8:1Fail
1.7:1Fail
2.6:1Fail
4
5.2:1AA
3:1Fail
1.7:1Fail
1.5:1Fail
5
8.1:1AAA
4.6:1AA
2.6:1Fail
1.5:1Fail

Similar palettes

More like Modern Loft Concrete

View all monochrome