Back to palettes

Palette

Industrial Loft Grey

A minimalist collection of cool grays and subtle blues, inspired by the sleek, unadorned aesthetic of an industrial loft.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B4D4B#7A7F7A#B0C4DE#E0DED7#696969

Palette guide

How to use Industrial Loft Grey

Overview

The "Industrial Loft Grey" palette offers a minimalist collection of cool grays and subtle blues, inspired by the sleek, unadorned aesthetic of an industrial loft. Anchored by the deep, earthy #4B4D4B and complemented by the versatile #696969, this palette provides a robust foundation. The striking #B0C4DE introduces a cool, muted steel-blue accent, while #7A7F7A adds a unique green-gray tone. The soft, near-white #E0DED7 brightens the scheme, ensuring excellent readability. Designers can use this palette to create sophisticated, modern interfaces that blend raw industrial charm with a touch of understated elegance.

Best used for

  • Contemporary art gallery websites
  • Minimalist product showcases
  • Sustainable design studio branding
  • High-tech data visualization tools
  • Architectural portfolio sites
  • Urban lifestyle fashion lookbooks

Suggested color roles

primary

A deep, grounding green-gray for backgrounds or foundational elements. Use #4B4D4B to establish a calm, natural base.

secondary

A versatile mid-gray for panels, headers, or content blocks. Apply #696969 to create clear visual separation and structure.

accent

A cool, muted steel-blue for interactive elements, highlights, or key data points. #B0C4DE provides a refreshing pop of color.

background

A deep, earthy green-gray. #4B4D4B offers a sophisticated and calming backdrop.

text

For primary text, #E0DED7 provides excellent readability on #4B4D4B or #696969. For secondary text, #7A7F7A can be used on lighter backgrounds.

Accessibility notes

  • Ensure #E0DED7 text on #4B4D4B or #696969 backgrounds meets WCAG AA contrast.
  • Avoid using #7A7F7A text on #B0C4DE backgrounds due to insufficient contrast.
  • For the blue accent #B0C4DE, ensure sufficient contrast if used for text, especially on mid-grays.
  • Consider using a dark charcoal (e.g., #222222) on #E0DED7 for headings or critical information for maximum clarity.

Recommended combinations

Loft Base

Ideal for constructing clean UI, using #4B4D4B as background, #696969 for panels, and #E0DED7 for primary text.

#4B4D4B · #696969 · #E0DED7

Blue Accent

Use #B0C4DE to highlight calls to action or key information against the dark base, with #E0DED7 for supporting text.

#4B4D4B · #B0C4DE · #E0DED7

Subtle Layers

Perfect for creating nuanced depth in dashboards or complex interfaces, with the blue as a subtle indicator.

#696969 · #7A7F7A · #B0C4DE

CSS variables

:root {
  --industrial-loft-grey-1: #4B4D4B;
  --industrial-loft-grey-2: #7A7F7A;
  --industrial-loft-grey-3: #B0C4DE;
  --industrial-loft-grey-4: #E0DED7;
  --industrial-loft-grey-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-loft-grey": {
        1: "#4B4D4B",
        2: "#7A7F7A",
        3: "#B0C4DE",
        4: "#E0DED7",
        5: "#696969",
      }
    }
  }
}

Related searches

cool grey blue paletteindustrial minimalist colorsloft apartment aestheticmodern neutral designsteel blue grey theme

Palette colors

Hex values

Color 1#4B4D4B
·
Color 2#7A7F7A
·
Color 3#B0C4DE
·
Color 4#E0DED7
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.8:1AA
6.3:1AA
1.6:1Fail
2
2.1:1Fail
2.3:1Fail
3:1AA18
1.3:1Fail
3
4.8:1AA
2.3:1Fail
1.3:1Fail
3.1:1AA18
4
6.3:1AA
3:1AA18
1.3:1Fail
4.1:1AA18
5
1.6:1Fail
1.3:1Fail
3.1:1AA18
4.1:1AA18

Similar palettes

More like Industrial Loft Grey

View all neutral
Brutalist Bloom Grey
Urban Concrete Grays
Bare Concrete Stillness
City Concrete Grind
City Loft Grey
Concrete Garden Grey