Palette

Steel Grid Gleam

A stark, modern palette of varying steel grays, suggesting polished metal and urban structures.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333C42#5F6B72#9CA8AD#C2C9CE#DBE1E6

Palette guide

How to use Steel Grid Gleam

Overview

The Steel Grid Gleam palette offers a stark, modern range of cool grays, perfectly capturing the essence of polished metal and urban structures. With a deep, almost charcoal blue-gray #333C42 and a shimmering light gray #DBE1E6, this collection provides a sophisticated foundation for contemporary design. The mid-tones like #5F6B72 and #9CA8AD are excellent for establishing depth and visual hierarchy. Designers can leverage these hex codes for creating sleek user interfaces, industrial branding, or architectural presentations. Developers will find this palette ideal for implementing a clean, professional aesthetic across web applications, ensuring readability and a cohesive, modern user experience.

Best used for

Tech startup branding
Modern dashboard UI
Engineering firm websites
Product design mockups
Automotive interface design
Contemporary art galleries

Suggested color roles

primary

#333C42 - A strong, dark blue-gray, excellent for primary content areas, headers, or bold typography.

secondary

#5F6B72 - A balanced cool gray, suitable for secondary information, borders, or subtle backgrounds.

accent

#9CA8AD - A lighter, sophisticated gray that can highlight specific elements without overpowering, or for hover states.

background

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

text

#333C42 - Deep blue-gray, offering high readability against lighter backgrounds, or use a near-white text on darker tones.

Accessibility notes

Ensure sufficient contrast between #333C42 text and #DBE1E6 background (WCAG AA compliant).
Avoid using #9CA8AD for small text on #DBE1E6 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 contrast checker tool to verify all text and interactive element color combinations.

Recommended combinations

Dark Base Interface

Provides a robust dark base for content, a light background for readability, and a mid-tone for secondary elements.

#333C42 · #DBE1E6 · #5F6B72

Metallic Layers

Creates a smooth, metallic gradient for layered UI components, cards, or subtle background textures.

#5F6B72 · #9CA8AD · #C2C9CE

Polished Contrast

Ideal for minimalist layouts, using the lightest shade as background, a mid-tone for cards, and the darkest for impactful text or icons.

#DBE1E6 · #C2C9CE · #333C42

CSS variables

:root {
  --steel-grid-gleam-1: #333C42;
  --steel-grid-gleam-2: #5F6B72;
  --steel-grid-gleam-3: #9CA8AD;
  --steel-grid-gleam-4: #C2C9CE;
  --steel-grid-gleam-5: #DBE1E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-grid-gleam": {
        1: "#333C42",
        2: "#5F6B72",
        3: "#9CA8AD",
        4: "#C2C9CE",
        5: "#DBE1E6",
      }
    }
  }
}

Hex values

Color 1#333C42

Color 2#5F6B72

Color 3#9CA8AD

Color 4#C2C9CE

Color 5#DBE1E6

Accessibility

Contrast checker

2.1:1Fail

4.6:1AA

6.7:1AA

8.5:1AAA

2.1:1Fail

2.2:1Fail

3.3:1AA18

4.2:1AA18

4.6:1AA

2.2:1Fail

1.5:1Fail

1.8:1Fail

6.7:1AA

3.3:1AA18

1.5:1Fail

1.3:1Fail

8.5:1AAA

4.2:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Steel Grid Gleam

View all Monochrome

Chrome Reflection

Urban Grid Dawn

Abstract Urban Canvas

Grayscale Stone Etch

Gritty Urban Canvas

Industrial Echo Wall