Palette

Industrial Steel Dawn

Shades of cool steel and concrete create a stark, modern aesthetic, reflecting an urban landscape at dawn.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4040#606B6B#9CA9A9#C5D2D2#E0E0E0

Palette guide

How to use Industrial Steel Dawn

Overview

The Industrial Steel Dawn palette captures the stark, modern aesthetic of an urban landscape at daybreak, featuring cool shades of steel and concrete. Ranging from the deep, anchoring #3A4040 to the bright, almost white #E0E0E0, this monochromatic palette provides a clean, sophisticated, and minimalist foundation. Mid-tones like #606B6B, #9CA9A9, and #C5D2D2 offer excellent opportunities for creating visual depth, layering, and subtle gradients, perfect for sleek user interfaces or architectural renders. This palette is exceptionally suited for projects seeking a contemporary, professional, and understated feel, appealing to brands that value clarity, precision, and a modern edge.

Best used for

Modern corporate websites and branding
Architectural and engineering firm portfolios
Minimalist UI/UX design for tech products
Urban photography and art installations
High-tech industrial product showcases
Clean and professional presentation templates

Suggested color roles

primary

#3A4040. This deep, cool steel gray serves as a powerful, grounding background, establishing a modern and sophisticated aesthetic.

secondary

#606B6B. A slightly lighter, medium-dark gray, ideal for secondary panels, cards, or navigation, offering subtle contrast against the primary.

accent

#9CA9A9. Use this neutral, mid-tone gray for interactive elements, borders, or subtle highlights, providing a clean, metallic feel.

background

#3A4040. An excellent choice for the main canvas, creating a cool, expansive environment that highlights the palette's minimalist character.

text

#E0E0E0. This lightest, near-white gray provides excellent readability for primary text on #3A4040 or #606B6B. For headings, consider pure black or dark charcoal.

Accessibility notes

#E0E0E0 on #3A4040 or #606B6B should offer good WCAG AA contrast for text. Always verify with a contrast checker.
Ensure interactive elements using #9CA9A9 have clear hover and focus states against similar cool backgrounds.
Avoid using #606B6B or darker for text on #3A4040, as contrast will be insufficient for readability.
The cool, desaturated nature of this palette generally supports good readability, but consistent application of light text on dark backgrounds is key.

Recommended combinations

Deep Steel Base

Forms a strong, modern UI: #3A4040 for background, #606B6B for panels, #E0E0E0 for primary text.

#3A4040 · #606B6B · #E0E0E0

Layered Concrete

Creates depth with cool grays: #606B6B as base, #9CA9A9 for details, #C5D2D2 for secondary information.

#606B6B · #9CA9A9 · #C5D2D2

Dawn Highlight

Use #3A4040 as a deep canvas, #9CA9A9 for prominent accents, and #E0E0E0 for clear headings.

#3A4040 · #9CA9A9 · #E0E0E0

CSS variables

:root {
  --industrial-steel-dawn-1: #3A4040;
  --industrial-steel-dawn-2: #606B6B;
  --industrial-steel-dawn-3: #9CA9A9;
  --industrial-steel-dawn-4: #C5D2D2;
  --industrial-steel-dawn-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-steel-dawn": {
        1: "#3A4040",
        2: "#606B6B",
        3: "#9CA9A9",
        4: "#C5D2D2",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#3A4040

Color 2#606B6B

Color 3#9CA9A9

Color 4#C5D2D2

Color 5#E0E0E0

Accessibility

Contrast checker

1.9:1Fail

4.4:1AA18

6.8:1AA

8:1AAA

1.9:1Fail

2.3:1Fail

3.5:1AA18

4.2:1AA18

4.4:1AA18

2.3:1Fail

1.6:1Fail

1.8:1Fail