Palette

Industrial Edge Grey

Reflects the raw, functional beauty of industrial spaces, stark and unyielding.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3A47#5A6B7A#8D9BAA#C0CDDB#E0E8F0

Palette guide

How to use Industrial Edge Grey

Overview

The Industrial Edge Grey palette embodies the raw, functional beauty of industrial spaces, offering a stark and unyielding collection of cool greys. From the deep, foundational #2C3A47 to the airy #E0E8F0, with versatile mid-tones like #8D9BAA, this palette is designed for designers and developers seeking a robust, modern aesthetic. It provides excellent contrast for UI elements and readability, making it suitable for applications requiring a strong, no-nonsense visual identity. Leverage these shades to create powerful backgrounds, clear typography, and structured layouts that reflect a sense of enduring strength and contemporary minimalism.

Best used for

Modern web and app interfaces
Architectural firm branding
Industrial product design showcases
Technical documentation platforms
UI dashboards and analytics
Urban-themed photography sites

Suggested color roles

primary

#2C3A47 - A deep, cool grey perfect for primary navigation, footers, or strong background sections, anchoring the design.

secondary

#5A6B7A - Use for secondary content blocks, card backgrounds, or dividing lines to create visual separation and depth.

accent

#8D9BAA - A balanced mid-grey, ideal for subtle highlights, interactive elements, or icons that need gentle emphasis.

background

#E0E8F0 - A very light, cool grey that serves as an excellent content background, providing a clean and breathable canvas.

text

#2C3A47 - Optimal for primary body text on light backgrounds like #E0E8F0 or #C0CDDB, ensuring high readability. A bright white works on #2C3A47.

Accessibility notes

Ensure high contrast between #2C3A47 text and #E0E8F0 backgrounds to meet WCAG AA/AAA standards.
Avoid placing #C0CDDB text on #E0E8F0 for small font sizes due to insufficient contrast.
Use white or a very light grey for text on #2C3A47 to ensure legibility.
Verify contrast for interactive elements using #8D9BAA against adjacent background colors.

Recommended combinations

Strong Foundation

Creates a powerful, high-contrast base suitable for headers, main content areas, and clear typography.

#2C3A47 · #5A6B7A · #E0E8F0

Layered Depth

Excellent for building subtle visual layers and hierarchies in UI components, like cards or modals.

#E0E8F0 · #C0CDDB · #8D9BAA

Mid-Tone Harmony

Ideal for creating a balanced, professional look in sections where a softer but still structured feel is desired.

#5A6B7A · #8D9BAA · #C0CDDB

CSS variables

:root {
  --industrial-edge-grey-1: #2C3A47;
  --industrial-edge-grey-2: #5A6B7A;
  --industrial-edge-grey-3: #8D9BAA;
  --industrial-edge-grey-4: #C0CDDB;
  --industrial-edge-grey-5: #E0E8F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-edge-grey": {
        1: "#2C3A47",
        2: "#5A6B7A",
        3: "#8D9BAA",
        4: "#C0CDDB",
        5: "#E0E8F0",
      }
    }
  }
}

Hex values

Color 1#2C3A47

Color 2#5A6B7A

Color 3#8D9BAA

Color 4#C0CDDB

Color 5#E0E8F0

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

7.2:1AAA

9.4:1AAA

2.1:1Fail

1.9:1Fail

3.4:1AA18

4.4:1AA18

4.1:1AA18

1.9:1Fail

1.8:1Fail

2.3:1Fail

7.2:1AAA

3.4:1AA18

1.8:1Fail

1.3:1Fail

9.4:1AAA

4.4:1AA18

2.3:1Fail

1.3:1Fail

Similar palettes

More like Industrial Edge Grey

Abstract Urban Canvas

Steel Grid Gleam