Palette

Industrial Loft Edge

A stark collection of concrete greys and steely blues, defining a modern, minimalist industrial space.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#708090#A9A9A9#C0C0C0#36454F

Palette guide

How to use Industrial Loft Edge

Overview

The "Industrial Loft Edge" palette defines a modern, minimalist industrial space with a stark collection of concrete grays and steely blues. Ranging from the deep charcoal-blue #36454F to the cool light gray #C0C0C0, this palette is ideal for conveying an edgy, sophisticated aesthetic. #4F4F4F provides a robust mid-tone, while #708090 introduces a subtle, muted blue-gray that adds character without overpowering. #A9A9A9 serves as a versatile accent for clarity. Designers will find this palette excellent for creating clean, structured, and contemporary interfaces that evoke urban strength and modern design principles.

Best used for

Modern furniture e-commerce platforms
Architectural visualization studios
Sleek tech product landing pages
Urban lifestyle magazines
Minimalist app dashboards
Industrial-inspired fashion branding

Suggested color roles

primary

A deep, grounding blue-gray for main backgrounds or foundational elements. Use #36454F to establish a strong, modern presence.

secondary

A versatile mid-dark gray for panels, headers, or prominent sections. Apply #4F4F4F to create clear visual separation.

accent

A clean, light gray for highlights, interactive elements, or primary text. #C0C0C0 offers excellent visibility.

background

An immersive, deep blue-gray. #36454F provides a sophisticated and contemporary canvas.

text

For primary text, #C0C0C0 or #A9A9A9 offers good readability on #36454F or #4F4F4F. For secondary text, #708090 can be used on a lighter background.

Accessibility notes

Ensure #C0C0C0 text on #36454F or #4F4F4F backgrounds meets WCAG AA contrast standards.
Avoid using #708090 text on #A9A9A9 backgrounds due to insufficient contrast.
For interactive elements, ensure distinct visual cues beyond color, such as hover states or iconography.
Consider using a pure white text on #36454F for critical headings or calls to action to maximize impact.

Recommended combinations

Deep Urban

Ideal for dark mode UI, using #36454F as background, #4F4F4F for panels, and #C0C0C0 for primary text.

#36454F · #4F4F4F · #C0C0C0

Steely Layers

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

#4F4F4F · #708090 · #A9A9A9

Clean Accent

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

#36454F · #A9A9A9 · #C0C0C0

CSS variables

:root {
  --industrial-loft-edge-1: #4F4F4F;
  --industrial-loft-edge-2: #708090;
  --industrial-loft-edge-3: #A9A9A9;
  --industrial-loft-edge-4: #C0C0C0;
  --industrial-loft-edge-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-loft-edge": {
        1: "#4F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#36454F

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

4.5:1AA

1.2:1Fail

2:1Fail

1.7:1Fail

2.2:1Fail

2.4:1Fail

3.5:1AA18

1.7:1Fail

1.3:1Fail

4.2:1AA18

4.5:1AA

2.2:1Fail

1.3:1Fail

5.4:1AA

1.2:1Fail

2.4:1Fail

4.2:1AA18

5.4:1AA

Similar palettes

More like Industrial Loft Edge

View all neutral

Concrete Grid Lines

Concrete Loft Living

Industrial Loft Concrete

Smoked Glass Hues

Urban Concrete Grays

Urban Loft Echo