Palette

Industrial Loft Concrete

A stark and sophisticated palette inspired by raw concrete and minimalist industrial architecture.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#A9A9A9#D3D3D3#464646#BEBEBE

Palette guide

How to use Industrial Loft Concrete

Overview

The "Industrial Loft Concrete" palette offers a stark and sophisticated range of mid-tone grays, inspired by raw concrete and minimalist industrial architecture. From the deep #464646 to the lighter #D3D3D3, this collection provides a versatile foundation for modern, clean designs. #696969 and #A9A9A9 serve as excellent intermediate tones, perfect for creating subtle depth and layering in user interfaces. The bright #BEBEBE acts as a clean highlight, ensuring readability and visual clarity. This palette is ideal for designers aiming to achieve a refined, urban aesthetic that is both robust and understated.

Best used for

Modern minimalist interior design websites
Architectural rendering projects
High-end urban real estate branding
Concrete product packaging
Art gallery digital interfaces
Sophisticated tech startup branding

Suggested color roles

primary

A solid, deep gray for main backgrounds or foundational elements. Use #464646 to establish a stable and sophisticated base.

secondary

A versatile mid-gray for panels, cards, or borders. Apply #696969 to create subtle depth and organization.

accent

A clean, light gray for highlights, interactive elements, or primary text. #D3D3D3 provides clear visibility.

background

A robust, mid-dark gray. #464646 provides an elegant and modern canvas.

text

For primary text, #D3D3D3 or #BEBEBE offers good readability on #464646 or #696969. For secondary text, #A9A9A9 can be used on #464646.

Accessibility notes

Ensure #D3D3D3 or #BEBEBE text on #464646 or #696969 backgrounds meets WCAG AA contrast.
Avoid using #A9A9A9 text on #BEBEBE backgrounds due to insufficient contrast.
For interactive elements, use distinct hover/active states beyond subtle color changes.
Consider using a dark charcoal (e.g., #222222) on #D3D3D3 for critical headings to maximize impact.

Recommended combinations

Solid Foundation

Ideal for structuring website layouts, using #464646 as base, #696969 for panels, and #D3D3D3 for main content text.

#464646 · #696969 · #D3D3D3

Layered Depth

Creates a sophisticated, subtle gradient for cards, modal backgrounds, or layered information displays.

#696969 · #A9A9A9 · #BEBEBE

Clean Contrast

Use #BEBEBE for calls to action or key data points against #464646, with #D3D3D3 for supporting text.

#464646 · #BEBEBE · #D3D3D3

CSS variables

:root {
  --industrial-loft-concrete-1: #696969;
  --industrial-loft-concrete-2: #A9A9A9;
  --industrial-loft-concrete-3: #D3D3D3;
  --industrial-loft-concrete-4: #464646;
  --industrial-loft-concrete-5: #BEBEBE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-loft-concrete": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#464646",
        5: "#BEBEBE",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#464646

Color 5#BEBEBE

Accessibility

Contrast checker

2.3:1Fail

3.7:1AA18

1.7:1Fail

3:1Fail

2.3:1Fail

1.6:1Fail

4:1AA18

1.3:1Fail

3.7:1AA18

1.6:1Fail

6.3:1AA

1.2:1Fail

1.7:1Fail

4:1AA18

6.3:1AA

5.1:1AA

3:1Fail

1.3:1Fail

1.2:1Fail

5.1:1AA

Similar palettes

More like Industrial Loft Concrete

Bare Concrete Stillness

Brutalist Bloom Grey