Palette

Urban Steel Grays

A sleek, modern palette of cool greys and blues, reflecting the clean lines and polished surfaces of urban steel.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A9A9A9#B0C4DE#6C7A89#4A525A

Palette guide

How to use Urban Steel Grays

Overview

The Urban Steel Grays palette presents a sleek, modern array of cool greys and blues, reflecting the clean lines and polished surfaces of urban steel. This collection features the refined #778899, the classic #A9A9A9, the soft #B0C4DE, the robust #6C7A89, and the deep, anchoring #4A525A. It's an excellent choice for designers and developers aiming for a sophisticated, professional, and minimalist aesthetic. Each hex code contributes to a harmonious and contemporary visual experience, perfect for applications, branding, or digital content that requires a clean, strong, and timeless feel. This palette conveys reliability, professionalism, and modern elegance.

Best used for

Corporate identity and branding
Luxury goods e-commerce platforms
Automotive brochures and websites
Architectural renders and presentations
Professional services marketing materials
Clean UI design systems

Suggested color roles

primary

#4A525A - A deep, commanding steel-grey, ideal for primary branding elements, robust headers, or foundational UI components.

secondary

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

accent

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

background

#B0C4DE - A light, cool blue-grey backdrop, reminiscent of polished steel, providing a clean and inviting canvas for content.

text

#4A525A or a dark charcoal for primary body text on light backgrounds, ensuring optimal readability. For dark backgrounds, #B0C4DE or white offers clear contrast.

Accessibility notes

Ensure sufficient contrast between #4A525A text and #B0C4DE background for WCAG AA compliance.
Avoid using #A9A9A9 or #778899 for small text on #B0C4DE backgrounds due to potential low contrast.
Clearly define focus and hover states for interactive elements using a distinct border or subtle shade adjustment.
Always use a contrast checker to validate combinations, especially for critical information and interactive components.

Recommended combinations

Polished Contrast

High-contrast pairing for main text, clean backgrounds, and a supportive mid-tone for secondary content or UI.

#4A525A · #B0C4DE · #6C7A89

Blue-Grey Blend

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

#6C7A89 · #778899 · #A9A9A9

Subtle Accents

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

#4A525A · #B0C4DE · #778899

CSS variables

:root {
  --urban-steel-grays-1: #778899;
  --urban-steel-grays-2: #A9A9A9;
  --urban-steel-grays-3: #B0C4DE;
  --urban-steel-grays-4: #6C7A89;
  --urban-steel-grays-5: #4A525A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-steel-grays": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#6C7A89",
        5: "#4A525A",
      }
    }
  }
}

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#B0C4DE

Color 4#6C7A89

Color 5#4A525A

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

1.2:1Fail

2.2:1Fail

1.5:1Fail

1.3:1Fail

1.9:1Fail

3.4:1AA18

2:1Fail

1.3:1Fail

2.5:1Fail

4.5:1AA18

1.2:1Fail

1.9:1Fail

2.5:1Fail

1.8:1Fail

2.2:1Fail

3.4:1AA18

4.5:1AA18

1.8:1Fail

Similar palettes

More like Urban Steel Grays

Industrial Loft Concrete

Industrial Urban Grid

Industrial Urban Grit