Back to palettes

Palette

Monochromatic Steel Gaze

A subtle progression of cool greys, like light reflecting off brushed steel.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#A9A9A9#DCDCDC#F5F5F5

Palette guide

How to use Monochromatic Steel Gaze

Overview

The "Monochromatic Steel Gaze" palette offers a refined spectrum of cool greys, ideal for creating sophisticated and minimalist designs. Ranging from the deep, anchoring #36454F to the bright, airy #F5F5F5, with mid-tones like #708090, #A9A9A9, and #DCDCDC, this collection evokes the sleekness of brushed steel and contemporary architecture. Designers and developers will find this palette excellent for establishing a professional, calm, and modern aesthetic. Its subtle shifts provide depth without overwhelming, perfect for interfaces and branding that prioritize clarity and understated elegance. Consider it for projects requiring a clean, industrial, or high-tech feel.

Best used for

  • Corporate websites and dashboards
  • Minimalist UI/UX design
  • Architecture and interior design portfolios
  • High-tech product branding
  • Photography and art exhibition sites
  • Professional presentations

Suggested color roles

primary

Use #36454F for strong foundational elements like headers or navigation bars, providing a solid, authoritative base.

secondary

Apply #708090 for subheadings, active states, or prominent section backgrounds, offering a balanced contrast.

accent

Utilize #A9A9A9 or #DCDCDC sparingly for subtle highlights, interactive elements, or progress indicators to add visual interest.

background

Employ #F5F5F5 for main content areas and backgrounds to ensure readability and a clean, open feel.

text

For body text, use #36454F or #708090 on lighter backgrounds like #F5F5F5 or #DCDCDC for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between #36454F text and #F5F5F5 backgrounds (or similar light shades).
  • Avoid placing light greys like #DCDCDC on #F5F5F5 for critical text to prevent readability issues.
  • Use #708090 for larger text elements if pairing with a slightly darker background to maintain legibility.
  • Test color pairings with accessibility tools to meet WCAG guidelines for color contrast ratios.

Recommended combinations

Deep Foundation

Ideal for a strong header (#36454F) with light text (#DCDCDC) and a very light content background (#F5F5F5).

#36454F · #DCDCDC · #F5F5F5

Subtle Interface

Excellent for layered UI elements, such as a medium grey card (#708090) with lighter borders (#A9A9A9) and subtle icons (#DCDCDC).

#708090 · #A9A9A9 · #DCDCDC

High Contrast Text

Use #36454F for headings, #708090 for body text, and #F5F5F5 as a clean background for maximum readability.

#36454F · #708090 · #F5F5F5

CSS variables

:root {
  --monochromatic-steel-gaze-1: #36454F;
  --monochromatic-steel-gaze-2: #708090;
  --monochromatic-steel-gaze-3: #A9A9A9;
  --monochromatic-steel-gaze-4: #DCDCDC;
  --monochromatic-steel-gaze-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochromatic-steel-gaze": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#DCDCDC",
        5: "#F5F5F5",
      }
    }
  }
}

Related searches

cool grey color schememonochromatic grey palettesteel grey hex codesminimalist ui greyindustrial color palette

Palette colors

Hex values

Color 1#36454F
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#DCDCDC
·
Color 5#F5F5F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
4.2:1AA18
7.2:1AAA
9.1:1AAA
2
2.4:1Fail
1.7:1Fail
3:1Fail
3.7:1AA18
3
4.2:1AA18
1.7:1Fail
1.7:1Fail
2.2:1Fail
4
7.2:1AAA
3:1Fail
1.7:1Fail
1.3:1Fail
5
9.1:1AAA
3.7:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Monochromatic Steel Gaze

View all monochrome
City Grayscale View
Graphite Haze Gradient
Industrial Steel Gaze
Lunar Dust Veil
Metal Sheen
Monochrome Granite Edge