Palette

Steel Beam Contrast

Sharp contrasts of dark and light greys reflect modern industrial design and steel architecture.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel Beam Contrast 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 Steel Beam Contrast.

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

Data visualization

#F2F2F2#C0C0C0#808080#404040#1C1C1C

Palette guide

How to use Steel Beam Contrast

Overview

The "Steel Beam Contrast" palette offers a sharp, modern monochrome experience, reflecting the robust and clean aesthetic of industrial steel architecture. Ranging from the darkest #1C1C1C (Near Black) and #404040 (Dark Grey) to the bright #F2F2F2 (Off-White), it provides a spectrum of greys that create strong visual hierarchy and depth. The mid-tones, #808080 (Medium Grey) and #C0C0C0 (Light Grey), offer versatility for various elements. This palette is perfect for designs that aim for a minimalist, strong, and highly functional feel, emphasizing structure and clarity.

Best used for

Modern architectural visualizations
Minimalist web design and interfaces
Tech company branding and corporate reports
Industrial photography displays
Clean, professional user interfaces (UI/UX)
Urban-themed editorial layouts

Suggested color roles

primary

Utilize #1C1C1C as the deepest, most impactful color for strong text, outlines, or foundational blocks.

secondary

Apply #404040 for structural elements, dark backgrounds, or prominent headings.

accent

Use #F2F2F2 (Off-White) for sharp highlights, clean dividers, or as a bright background for contrast.

background

A neutral #C0C0C0 serves as an excellent light-to-medium grey background, providing a clean canvas.

text

For optimal readability, use #1C1C1C for text on light backgrounds like #F2F2F2, and #F2F2F2 for text on dark backgrounds like #1C1C1C.

Accessibility notes

Ensure sufficient contrast between #808080 text and #C0C0C0 backgrounds for critical information.
The darkest #1C1C1C provides excellent contrast with #F2F2F2 for all text sizes.
Avoid pairing #C0C0C0 text on #F2F2F2 as the contrast will be insufficient for readability.
For body text, use high-contrast combinations such as #1C1C1C on #F2F2F2 or #404040 on #C0C0C0.

Recommended combinations

Stark Contrast

Creates bold, modern statements with maximum readability and visual impact.

#1C1C1C · #F2F2F2 · #404040

Subtle Depth

Offers a smooth gradient for layered elements or to create a sense of recession.

#C0C0C0 · #808080 · #404040

Light & Open

Provides a clean, airy feel, ideal for minimalist layouts or content-focused designs.

#F2F2F2 · #C0C0C0 · #808080

CSS variables

:root {
  --steel-beam-contrast-1: #F2F2F2;
  --steel-beam-contrast-2: #C0C0C0;
  --steel-beam-contrast-3: #808080;
  --steel-beam-contrast-4: #404040;
  --steel-beam-contrast-5: #1C1C1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-beam-contrast": {
        1: "#F2F2F2",
        2: "#C0C0C0",
        3: "#808080",
        4: "#404040",
        5: "#1C1C1C",
      }
    }
  }
}

Hex values

Color 1#F2F2F2

Color 2#C0C0C0

Color 3#808080

Color 4#404040

Color 5#1C1C1C

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

9.3:1AAA

15.2:1AAA

1.6:1Fail

2.2:1Fail

5.7:1AA

9.4:1AAA

3.5:1AA18

2.2:1Fail

2.6:1Fail

4.3:1AA18

9.3:1AAA

5.7:1AA

2.6:1Fail

1.6:1Fail

15.2:1AAA

9.4:1AAA

4.3:1AA18

1.6:1Fail

Similar palettes

More like Steel Beam Contrast

Steel Beam Contrast

See it in context.

Ready when you are.

Built with Steel Beam Contrast.

How to use Steel Beam Contrast

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Stark Contrast

Subtle Depth

Light & Open

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Steel Beam Contrast