Palette

City Steel Gleam

A sleek, modern palette reflecting the cool, stark aesthetic of city steel and concrete structures.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Steel Gleam 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 City Steel Gleam.

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

Data visualization

#3D4A52#5E6C71#7A8C9C#BECAD3#DCE2E7

Palette guide

How to use City Steel Gleam

Overview

The "City Steel Gleam" palette embodies the sleek, industrial aesthetic of modern urban architecture. This cool, sophisticated monochrome ranges from a deep, anchoring steel gray #3D4A52 to a very light, almost silver-white #DCE2E7. Intermediate shades like #5E6C71, #7A8C9C, and #BECAD3 provide a smooth, metallic gradient, perfect for creating a clean, professional, and minimalist ambiance. Designers and developers can leverage this palette for high-tech interfaces, corporate branding, or any project requiring a precise, modern, and understated elegance that conveys strength and innovation.

Best used for

Tech company websites and apps
Industrial design portfolios
Modern corporate branding
Minimalist UI/UX design
Architectural visualization
Luxury automotive interfaces

Suggested color roles

primary

#3D4A52 - A strong, deep steel gray, ideal for foundational elements, headers, or robust typography.

secondary

#5E6C71 - A slightly lighter cool gray, perfect for secondary panels, navigation, or subtle dividers.

accent

#7A8C9C - A versatile mid-tone gray, suitable for interactive elements, borders, or subtle highlights.

background

#DCE2E7 - A very light, airy gray, providing a clean, expansive, and almost reflective canvas for content.

text

#3D4A52 - For highly readable body text on light backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #BECAD3 or #DCE2E7 for text on similar light backgrounds.
Darker colors like #3D4A52 provide excellent contrast for light text (e.g., white), enhancing readability.
Avoid using mid-tones for small text on closely related mid-tone backgrounds, as this can reduce legibility.
Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, especially across the lighter shades.

Recommended combinations

Industrial Depth

Ideal for dark-themed interfaces, creating visual hierarchy and a sense of robust construction.

#3D4A52 · #5E6C71 · #7A8C9C

Modern Polish

Excellent for light mode applications, using the lightest for background and the darkest for key text.

#DCE2E7 · #BECAD3 · #3D4A52

Subtle Sheen

Use for delicate borders, hover effects, or to add slight dimensionality to elements without harsh contrast.

#5E6C71 · #7A8C9C · #BECAD3

CSS variables

:root {
  --city-steel-gleam-1: #3D4A52;
  --city-steel-gleam-2: #5E6C71;
  --city-steel-gleam-3: #7A8C9C;
  --city-steel-gleam-4: #BECAD3;
  --city-steel-gleam-5: #DCE2E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-steel-gleam": {
        1: "#3D4A52",
        2: "#5E6C71",
        3: "#7A8C9C",
        4: "#BECAD3",
        5: "#DCE2E7",
      }
    }
  }
}

Hex values

Color 1#3D4A52

Color 2#5E6C71

Color 3#7A8C9C

Color 4#BECAD3

Color 5#DCE2E7

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

5.5:1AA

7:1AA

1.7:1Fail

1.6:1Fail

3.3:1AA18

4.2:1AA18

2.6:1Fail

1.6:1Fail

2.1:1Fail

2.7:1Fail

5.5:1AA

3.3:1AA18

2.1:1Fail

1.3:1Fail

7:1AA

4.2:1AA18

2.7:1Fail

1.3:1Fail

Similar palettes

More like City Steel Gleam

View all monochrome

Industrial Chic Echo

Industrial Cityscape Grey