Palette

Steel City

Sleek and sophisticated, reflecting the cool, modern lines of urban architecture and steel structures.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#424242#6D6D6D#AFAFAF#D7D7D7#1C1C1C

Palette guide

How to use Steel City

Overview

The Steel City palette offers a sophisticated range of neutral grays, perfect for designs seeking a modern, minimalist aesthetic inspired by urban architecture. Featuring deep charcoal #1C1C1C, a balanced mid-tone gray #424242, and lighter shades like #D7D7D7, this collection provides a versatile foundation. Designers can leverage these hues to create sleek user interfaces, professional branding, or elegant editorial layouts. Developers will find these hex codes ideal for establishing a robust dark mode theme or a subtle, refined visual hierarchy across web and app interfaces. The inherent coolness of these grays ensures a clean, contemporary feel, reflecting steel structures and concrete landscapes.

Best used for

Corporate websites and branding
Modern interior design concepts
UI/UX for tech applications
Editorial design for luxury magazines
Dark mode themes
Architectural visualizations

Suggested color roles

primary

#424242 - A strong, grounding gray, excellent for main content areas or primary UI elements.

secondary

#6D6D6D - A versatile mid-gray, suitable for secondary information, borders, or subtle backgrounds.

accent

#AFAFAF - A lighter, elegant gray that can highlight specific elements without overpowering, or for hover states.

background

#D7D7D7 - A very light gray, ideal for clean, spacious backgrounds that provide gentle contrast.

text

#1C1C1C - Deep charcoal, offering high readability against lighter backgrounds, or use white text on darker tones.

Accessibility notes

Ensure sufficient contrast between #1C1C1C text and #D7D7D7 background (WCAG AA compliant).
Avoid using #AFAFAF for small text on #D7D7D7 as contrast may be insufficient.
For interactive elements, provide clear focus states using a distinct hue, or a darker/lighter shade from the palette.
Use a tool to check contrast ratios for all text and interactive element combinations.

Recommended combinations

Dark & Light Contrast

Ideal for establishing strong visual hierarchy, with #1C1C1C for text, #D7D7D7 for background, and #424242 for headings or accents.

#1C1C1C · #D7D7D7 · #424242

Mid-Tone Depth

Creates a subtle, sophisticated gradient for layered backgrounds, cards, or sectional dividers, offering depth without stark contrast.

#424242 · #6D6D6D · #AFAFAF

Sleek Monochrome

Perfect for minimalist designs where a soft, cohesive look is desired, such as subtle UI elements or elegant image overlays.

#D7D7D7 · #AFAFAF · #6D6D6D

CSS variables

:root {
  --steel-city-1: #424242;
  --steel-city-2: #6D6D6D;
  --steel-city-3: #AFAFAF;
  --steel-city-4: #D7D7D7;
  --steel-city-5: #1C1C1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-city": {
        1: "#424242",
        2: "#6D6D6D",
        3: "#AFAFAF",
        4: "#D7D7D7",
        5: "#1C1C1C",
      }
    }
  }
}

Hex values

Color 1#424242

Color 2#6D6D6D

Color 3#AFAFAF

Color 4#D7D7D7

Color 5#1C1C1C

Accessibility

Contrast checker

1.9:1Fail

4.6:1AA

7:1AA

1.7:1Fail

1.9:1Fail

2.4:1Fail

3.6:1AA18

3.3:1AA18

4.6:1AA

2.4:1Fail

1.5:1Fail

7.8:1AAA

7:1AA

3.6:1AA18

1.5:1Fail

11.8:1AAA

1.7:1Fail

3.3:1AA18

7.8:1AAA

11.8:1AAA

Similar palettes

More like Steel City

View all neutral

Architectural Slate Gray

City Concrete Grind

Concrete Garden Grey

Concrete Grid Lines

Concrete Jungle Bloom

Concrete Loft Living