Palette

Steel City Sheen

A sleek, metallic grayscale reflecting the clean lines of steel and chrome.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#666666#999999#CCCCCC#E6E6E6

Palette guide

How to use Steel City Sheen

Overview

The "Steel City Sheen" palette is a sleek, metallic grayscale reflecting the clean lines of steel and chrome in a modern urban landscape. It transitions smoothly from the deep #333333 (Charcoal Grey) to the bright #E6E6E6 (Off-White), with versatile mid-tones like #666666 (Dark Grey), #999999 (Medium Grey), and #CCCCCC (Light Grey). This palette excels at creating a sophisticated, minimalist, and highly polished aesthetic. It's ideal for designs that require a sense of precision, modernity, and understated elegance, mimicking the reflective surfaces of contemporary architecture and technology.

Best used for

High-tech product design and interfaces
Luxury automotive branding and marketing
Professional corporate websites and presentations
Modern art galleries and exhibition design
Minimalist interior design concepts
Fashion and lifestyle magazines

Suggested color roles

primary

Utilize #333333 as the darkest, most sophisticated base for strong text, outlines, or primary sections.

secondary

Apply #666666 for supporting elements, navigation, or darker content blocks.

accent

Use #E6E6E6 (Off-White) for sharp reflections, pristine backgrounds, or as a crisp highlight.

background

A clean #CCCCCC (Light Grey) serves as an excellent, spacious background, allowing content to breathe.

text

For optimal readability, use #333333 for text on light backgrounds like #E6E6E6, and #E6E6E6 for text on dark backgrounds like #333333.

Accessibility notes

Ensure sufficient contrast between #999999 text and #CCCCCC backgrounds for critical information.
The darkest #333333 offers excellent contrast for white or #E6E6E6 text.
Avoid pairing #CCCCCC text on #E6E6E6 as the contrast will be insufficient for readability.
For body text, use high-contrast combinations such as #333333 on #E6E6E6 or #666666 on #CCCCCC.

Recommended combinations

Sleek Chrome Finish

Creates a high-shine, modern look with strong contrast, ideal for striking visuals.

#333333 · #E6E6E6 · #666666

Urban Depth Gradient

Offers layered, sophisticated grey tones, perfect for backgrounds or complex structures.

#666666 · #999999 · #333333

Minimalist Base

Provides a light, airy, and clean feel, excellent for content-heavy pages or minimalist branding.

#CCCCCC · #E6E6E6 · #999999

CSS variables

:root {
  --steel-city-sheen-1: #333333;
  --steel-city-sheen-2: #666666;
  --steel-city-sheen-3: #999999;
  --steel-city-sheen-4: #CCCCCC;
  --steel-city-sheen-5: #E6E6E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-city-sheen": {
        1: "#333333",
        2: "#666666",
        3: "#999999",
        4: "#CCCCCC",
        5: "#E6E6E6",
      }
    }
  }
}

Hex values

Color 1#333333

Color 2#666666

Color 3#999999

Color 4#CCCCCC

Color 5#E6E6E6

Accessibility

Contrast checker

2.2:1Fail

4.4:1AA18

7.9:1AAA

10.1:1AAA

2.2:1Fail

2:1Fail

3.6:1AA18

4.6:1AA

4.4:1AA18

2:1Fail

1.8:1Fail

2.3:1Fail

7.9:1AAA

3.6:1AA18

1.8:1Fail

1.3:1Fail

10.1:1AAA

4.6:1AA

2.3:1Fail

1.3:1Fail

Similar palettes

More like Steel City Sheen

View all monochrome

Architectural Grid Hues

Brushed Steel Aura

Charcoal Whisper Scale

Grey Scale Journey

Minimalist Stone Carve

Art Gallery Minimal