Back to palettes

Palette

Urban Steel Echoes

A sleek progression of industrial greys, reflecting the sharp lines and cool surfaces of city steel.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Steel Echoes 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 Urban Steel Echoes.

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

Data visualization

#303030#505050#707070#909090#B0B0B0

Palette guide

How to use Urban Steel Echoes

Overview

The Urban Steel Echoes palette offers a sleek progression of industrial greys, reflecting the sharp lines and cool surfaces of city steel. This monochrome collection ranges from the deep, solid #303030 to the elegant #505050, the balanced #707070, the refined #909090, and the subtle #B0B0B0. It’s an exceptional choice for designers and developers seeking to convey strength, modernity, and a minimalist aesthetic. Each hex code contributes to a coherent and professional visual experience, perfect for applications, branding, or digital content that requires a clean, sophisticated, and timeless feel. This palette delivers a sense of robust elegance and contemporary simplicity.

Best used for

  • Automotive industry branding and websites
  • Luxury tech product interfaces
  • Minimalist art galleries and portfolios
  • High-end appliance branding
  • Professional services websites
  • Dark mode interfaces and themes

Suggested color roles

primary

#303030 - A deep, commanding charcoal, ideal for dominant branding elements, robust headers, or foundational UI components.

secondary

#505050 - A strong mid-tone for subheadings, navigation menus, or card backgrounds, offering excellent contrast and visual weight.

accent

#707070 - Use sparingly for subtle highlights, interactive states, or delicate decorative lines, adding a touch of refined sophistication.

background

#B0B0B0 - A light, cool grey backdrop, reminiscent of brushed steel, providing a clean and sophisticated canvas for content.

text

#303030 or a deep charcoal for primary body text on light backgrounds, ensuring optimal readability. For dark backgrounds, #B0B0B0 or white offers clear contrast.

Accessibility notes

  • Ensure sufficient contrast between #303030 text and #B0B0B0 background for WCAG AA compliance.
  • Avoid using #909090 or #707070 for small text on #B0B0B0 backgrounds due to potential low contrast.
  • Clearly define focus and hover states for interactive elements using a distinct outline or subtle shade adjustment.
  • Always use a contrast checker to validate combinations, especially for critical information and interactive components.

Recommended combinations

Deep Steel

High-contrast pairing for strong headlines, clean backgrounds, and a supportive mid-tone for secondary content.

#303030 · #B0B0B0 · #505050

Layered Greys

Creates a harmonious, layered grey effect, ideal for subtle gradients, cards, or visual depth in UI elements.

#505050 · #707070 · #909090

Metallic Sheen

Strong base with a light canvas and a subtle accent for interactive elements or delicate dividers, creating a sleek look.

#303030 · #B0B0B0 · #707070

CSS variables

:root {
  --urban-steel-echoes-1: #303030;
  --urban-steel-echoes-2: #505050;
  --urban-steel-echoes-3: #707070;
  --urban-steel-echoes-4: #909090;
  --urban-steel-echoes-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-steel-echoes": {
        1: "#303030",
        2: "#505050",
        3: "#707070",
        4: "#909090",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

dark grey paletteindustrial monochromesleek metallic colorsmodern grey scaleprofessional dark theme

Palette colors

Hex values

Color 1#303030
·
Color 2#505050
·
Color 3#707070
·
Color 4#909090
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.1:1AA18
6.1:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.7:1AA18
3
2.7:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.1:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
6.1:1AA
3.7:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Urban Steel Echoes

View all monochrome
Concrete Jungle Hue
Foundry Smoke
Graphite Cityscape
Industrial Steel Gaze
Monochrome Cityscape
Urban Concrete Sleek