Back to palettes

Palette

Industrial Loft Hues

A minimalist palette inspired by the cool, stark tones of concrete and steel in an urban industrial loft.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Loft Hues 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 Industrial Loft Hues.

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

Data visualization

#2B2D42#8D99AE#EDF2F4#D5D7DA#4C5768

Palette guide

How to use Industrial Loft Hues

Overview

The "Industrial Loft Hues" palette offers a minimalist collection inspired by the cool, stark tones of concrete and steel in an urban industrial loft. Ranging from the deep, almost black-blue #2B2D42 to the crisp, near-white #EDF2F4, this palette provides a sophisticated foundation for modern designs. #4C5768 and #8D99AE introduce versatile mid-blue-grays, perfect for creating depth and structure in user interfaces. The soft #D5D7DA serves as an excellent intermediate highlight, ensuring readability and visual clarity. This palette is ideal for designers aiming for a sleek, contemporary aesthetic that blends urban grit with refined minimalism.

Best used for

  • High-tech software dashboards
  • Modern architectural portfolios
  • Luxury urban real estate websites
  • Minimalist e-commerce platforms
  • Data visualization tools
  • Sophisticated design agency branding

Suggested color roles

primary

A deep, commanding blue-gray for main backgrounds or foundational elements. Use #2B2D42 to establish a strong, modern presence.

secondary

A versatile mid-blue-gray for panels, headers, or content blocks. Apply #4C5768 to create clear visual separation.

accent

A crisp, near-white for highlights, interactive elements, or primary text. #EDF2F4 offers excellent visibility.

background

An immersive, deep blue-gray. #2B2D42 provides a sophisticated and contemporary canvas.

text

For primary text, #EDF2F4 or #D5D7DA offers excellent readability on #2B2D42 or #4C5768. For secondary text, #8D99AE can be used on darker backgrounds.

Accessibility notes

  • Ensure #EDF2F4 text on #2B2D42 or #4C5768 backgrounds meets WCAG AA contrast standards.
  • Avoid using #D5D7DA text on #8D99AE backgrounds due to insufficient contrast.
  • For interactive elements, ensure distinct visual cues beyond color, such as hover states or iconography.
  • The cool tones may benefit from slightly larger font sizes for optimal readability, especially with mid-range grays.

Recommended combinations

Deep Loft

Ideal for dark mode UI, using #2B2D42 as background, #4C5768 for panels, and #EDF2F4 for primary text.

#2B2D42 · #4C5768 · #EDF2F4

Layered Steel

Creates subtle depth and a metallic feel for layered content, cards, or progress indicators in a modern interface.

#4C5768 · #8D99AE · #D5D7DA

Clean Contrast

Use #D5D7DA for secondary text or subtle borders, with #EDF2F4 for highlights or primary text against the dark base.

#2B2D42 · #D5D7DA · #EDF2F4

CSS variables

:root {
  --industrial-loft-hues-1: #2B2D42;
  --industrial-loft-hues-2: #8D99AE;
  --industrial-loft-hues-3: #EDF2F4;
  --industrial-loft-hues-4: #D5D7DA;
  --industrial-loft-hues-5: #4C5768;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-loft-hues": {
        1: "#2B2D42",
        2: "#8D99AE",
        3: "#EDF2F4",
        4: "#D5D7DA",
        5: "#4C5768",
      }
    }
  }
}

Related searches

blue grey minimalist paletteindustrial modern colorsurban loft interior designdark mode blue grey UIcontemporary neutral palette

Palette colors

Hex values

Color 1#2B2D42
·
Color 2#8D99AE
·
Color 3#EDF2F4
·
Color 4#D5D7DA
·
Color 5#4C5768
·

Accessibility

Contrast checker

1
2
3
4
5
1
4.7:1AA
12:1AAA
9.4:1AAA
1.8:1Fail
2
4.7:1AA
2.5:1Fail
2:1Fail
2.5:1Fail
3
12:1AAA
2.5:1Fail
1.3:1Fail
6.5:1AA
4
9.4:1AAA
2:1Fail
1.3:1Fail
5.1:1AA
5
1.8:1Fail
2.5:1Fail
6.5:1AA
5.1:1AA

Similar palettes

More like Industrial Loft Hues

View all monochrome
City Loft Minimal
City Steel Gleam
Concrete Jungle Bloom
Graphite Sketch Grid
Grey Scale Journey
Industrial Chic Echo