Palette

Urban Steel Fog

A sophisticated grayscale palette inspired by mist-shrouded cityscapes and raw industrial materials.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C0C0C0#A8A8A8#808080#585858#303030

Palette guide

How to use Urban Steel Fog

Overview

The Urban Steel Fog palette is a sophisticated grayscale collection inspired by mist-shrouded cityscapes and raw industrial materials. It progresses from the light #C0C0C0, through the balanced #A8A8A8, #808080, and #585858, to the deep, grounding #303030. This palette is an excellent choice for designers and developers aiming for a minimalist, elegant, and timeless aesthetic. Each hex code contributes to a coherent and professional visual experience, perfect for applications, branding, or editorial content that requires a clean, sophisticated, and understated feel. It provides a sense of quiet strength and modern sensibility, evoking calm and clarity.

Best used for

Art and photography websites
Minimalist branding and identity
Editorial layouts for luxury publications
Interior design concepts and portfolios
Tech product interfaces and dark modes
Elegant event invitations and stationery

Suggested color roles

primary

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

secondary

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

accent

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

background

#C0C0C0 - A light, cool grey backdrop, reminiscent of diffused fog, 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, #C0C0C0 or white offers clear contrast.

Accessibility notes

Ensure sufficient contrast between #303030 text and #C0C0C0 background for WCAG AA compliance.
Avoid using #A8A8A8 or #808080 for small text on #C0C0C0 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

Foggy Depth

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

#303030 · #C0C0C0 · #585858

Industrial Gradient

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

#585858 · #808080 · #A8A8A8

Light & Shadow

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

#303030 · #C0C0C0 · #A8A8A8

CSS variables

:root {
  --urban-steel-fog-1: #C0C0C0;
  --urban-steel-fog-2: #A8A8A8;
  --urban-steel-fog-3: #808080;
  --urban-steel-fog-4: #585858;
  --urban-steel-fog-5: #303030;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-steel-fog": {
        1: "#C0C0C0",
        2: "#A8A8A8",
        3: "#808080",
        4: "#585858",
        5: "#303030",
      }
    }
  }
}

Hex values

Color 1#C0C0C0

Color 2#A8A8A8

Color 3#808080

Color 4#585858

Color 5#303030

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

3.9:1AA18

7.3:1AAA

1.3:1Fail

1.7:1Fail

3:1Fail

5.6:1AA

2.2:1Fail

1.7:1Fail

1.8:1Fail

3.3:1AA18

3.9:1AA18

3:1Fail

1.8:1Fail

1.9:1Fail

7.3:1AAA

5.6:1AA

3.3:1AA18

1.9:1Fail

Similar palettes

More like Urban Steel Fog

View all monochrome

Concrete Jungle Canopy

Grayscale Metropolis Grid