Palette

Urban Steel Canyon

Reflects the cool, strong tones of urban steel and concrete, a modern and industrial landscape.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4750#5B6A7A#8799A8#B3C0CD#DCE4E9

Palette guide

How to use Urban Steel Canyon

Overview

The Urban Steel Canyon palette reflects the cool, strong tones of modern urban steel and concrete, presenting a sophisticated, industrial landscape. This collection ranges from the deep, anchoring #3A4750, through the balanced mid-tones of #5B6A7A, #8799A8, and #B3C0CD, to the airy lightness of #DCE4E9. It’s an excellent choice for designers and developers seeking to convey stability, modernity, and a minimalist aesthetic. Each hex code contributes to a harmonious, understated visual experience, perfect for applications, branding, or editorial content that requires a clean, professional, and timeless feel. This palette delivers a sense of robust elegance and contemporary strength.

Best used for

Industrial design portfolios
Architectural firm branding and websites
Tech company interfaces and marketing
Men's fashion or lifestyle e-commerce
Automotive industry presentations
Minimalist product packaging

Suggested color roles

primary

#3A4750 - A deep, commanding grey-blue, perfect for dominant branding elements, robust headers, or foundational UI components.

secondary

#5B6A7A - A strong mid-tone for subheadings, navigation menus, or card backgrounds, offering substantial visual weight and clarity.

accent

#8799A8 - Use sparingly for subtle highlights, interactive states, or delicate decorative lines, adding a touch of understated refinement.

background

#DCE4E9 - A light, clean backdrop, reminiscent of polished concrete, providing an excellent canvas for darker elements to stand out.

text

#3A4750 or a dark charcoal for primary body text on light backgrounds, ensuring optimal readability. For dark backgrounds, #DCE4E9 or white works well.

Accessibility notes

Ensure sufficient contrast between #3A4750 text and #DCE4E9 background for WCAG AA compliance.
Avoid using #B3C0CD or #8799A8 for small text on #DCE4E9 backgrounds due to potential low contrast.
Clearly define focus and hover states for interactive elements using a distinct outline or subtle shade change.
Always use a contrast checker to validate combinations, especially for critical information and interactive components.

Recommended combinations

Steel Depth

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

#3A4750 · #DCE4E9 · #5B6A7A

Canyon Layers

Creates a sophisticated, layered gradient effect, ideal for UI cards, subtle backgrounds, or visual hierarchies.

#5B6A7A · #8799A8 · #B3C0CD

Industrial Contrast

Strong base with a bright canvas and a soft, cool accent for interactive elements or subtle dividers.

#3A4750 · #DCE4E9 · #8799A8

CSS variables

:root {
  --urban-steel-canyon-1: #3A4750;
  --urban-steel-canyon-2: #5B6A7A;
  --urban-steel-canyon-3: #8799A8;
  --urban-steel-canyon-4: #B3C0CD;
  --urban-steel-canyon-5: #DCE4E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-steel-canyon": {
        1: "#3A4750",
        2: "#5B6A7A",
        3: "#8799A8",
        4: "#B3C0CD",
        5: "#DCE4E9",
      }
    }
  }
}

Hex values

Color 1#3A4750

Color 2#5B6A7A

Color 3#8799A8

Color 4#B3C0CD

Color 5#DCE4E9

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

5.2:1AA

7.4:1AAA

1.7:1Fail

1.9:1Fail

3:1Fail

4.3:1AA18

3.3:1AA18

1.9:1Fail

1.6:1Fail

2.3:1Fail

5.2:1AA

3:1Fail

1.6:1Fail

1.4:1Fail

7.4:1AAA

4.3:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Urban Steel Canyon

View all neutral

Skylight Grey Haze

Steel Frame Metropolis