Palette

Industrial Edge Steel

A palette of strong blues and cool greys, evoking the sleekness of industrial steel.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#34495E#7F8C8D#BDC3C7#ECF0F1

Palette guide

How to use Industrial Edge Steel

Overview

The Industrial Edge Steel palette captures the sleekness of industrial steel with its strong blues and cool greys, offering a sophisticated and modern aesthetic. Ranging from the deep #2C3E50 to the bright #ECF0F1, including the balanced #7F8C8D, this palette is highly versatile for designers and developers aiming for a clean, professional, and contemporary look. It provides a robust foundation for user interfaces, branding, and digital presentations, ensuring excellent readability and visual structure. The cool undertones evoke a sense of precision and reliability, making it perfect for conveying a high-tech or established brand identity across various platforms.

Best used for

Tech company branding and websites
Modern corporate interfaces
Automotive design showcases
Data visualization dashboards
Sleek product landing pages
Architectural concept designs

Suggested color roles

primary

#2C3E50 - A deep, rich blue-grey, perfect for primary branding, headers, and strong foundational elements to convey stability.

secondary

#34495E - A slightly lighter, complementary dark blue-grey for secondary navigation, prominent buttons, or section dividers.

accent

#7F8C8D - A cool, muted grey that works well for subtle highlights, interactive states, or icons, adding a touch of sophistication.

background

#ECF0F1 - A very light, almost white grey, ideal for a clean and expansive background, providing excellent contrast for text.

text

#2C3E50 - Optimal for primary body text on light backgrounds like #ECF0F1 or #BDC3C7 for maximum readability. Use a bright white on #2C3E50.

Accessibility notes

Ensure #2C3E50 text on #ECF0F1 background meets WCAG AA/AAA contrast ratios.
Avoid using #BDC3C7 text on #ECF0F1 for small font sizes; contrast may be too low.
Always use white or a very light grey for text placed on #2C3E50 or #34495E.
Check contrast for interactive elements using #7F8C8D against neighboring colors.

Recommended combinations

Deep Contrast

Creates a strong, professional contrast suitable for main layouts, headers, and important call-to-action elements.

#2C3E50 · #34495E · #ECF0F1

Subtle Cool

Ideal for backgrounds, subtle gradients, and layered UI elements where a soft, cool transition is desired.

#ECF0F1 · #BDC3C7 · #7F8C8D

Steel Accents

Effective for defining visual hierarchy within components, using varied cool tones for different states or information levels.

#34495E · #7F8C8D · #BDC3C7

CSS variables

:root {
  --industrial-edge-steel-1: #2C3E50;
  --industrial-edge-steel-2: #34495E;
  --industrial-edge-steel-3: #7F8C8D;
  --industrial-edge-steel-4: #BDC3C7;
  --industrial-edge-steel-5: #ECF0F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-edge-steel": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#7F8C8D",
        4: "#BDC3C7",
        5: "#ECF0F1",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#7F8C8D

Color 4#BDC3C7

Color 5#ECF0F1

Accessibility

Contrast checker

1.2:1Fail

3.2:1AA18

6.2:1AA

9.6:1AAA

1.2:1Fail

2.7:1Fail

5.2:1AA

8.1:1AAA

3.2:1AA18

2.7:1Fail

2:1Fail

3:1AA18

6.2:1AA

5.2:1AA

2:1Fail

1.6:1Fail

9.6:1AAA

8.1:1AAA

3:1AA18

1.6:1Fail

Similar palettes

More like Industrial Edge Steel

View all cool

Arctic Shoreline Chill