Back to palettes

Palette

Metal Sheen

A sophisticated spectrum of cool greys, capturing the polished yet understated elegance of pewter metal.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A6C71#8C8E93#B5B7BB#57595D#797B80

Palette guide

How to use Metal Sheen

Overview

The Metal Sheen palette offers a sophisticated spectrum of cool greys, capturing the polished yet understated elegance of pewter metal. With deep, anchoring tones like #57595D and #6A6C71, it provides a solid foundation for any design. Lighter, shimmering shades such as #8C8E93, #797B80, and the subtle #B5B7BB complete the collection, creating a cohesive and modern aesthetic. This palette is ideal for designers and developers aiming for a minimalist, industrial, or high-tech feel, perfect for projects that require a clean, professional, and timeless look with a touch of metallic sophistication.

Best used for

  • Corporate websites and professional portfolios
  • Luxury product design and branding
  • Minimalist UI/UX for applications and software
  • Architectural presentations and renders
  • Tech company branding and digital interfaces
  • Industrial design concepts and mood boards

Suggested color roles

primary

Use #57595D as a deep, grounding primary color for strong headers, navigation, or significant brand elements.

secondary

Employ #6A6C71 as a mid-tone, supportive secondary for subheadings, background sections, or decorative elements.

accent

Apply #B5B7BB for subtle highlights, interactive elements, or to add a gentle, polished gleam.

background

Utilize #B5B7BB or a near-white for a clean, understated background that allows darker greys to stand out.

text

For optimal readability, use #57595D or true black on lighter backgrounds like #B5B7BB.

Accessibility notes

  • Ensure sufficient contrast for text on backgrounds, especially with similar grey tones like #8C8E93 on #B5B7BB.
  • Prioritize #57595D for main body text on light backgrounds to meet WCAG contrast guidelines.
  • Avoid using light greys like #B5B7BB for small or critical text elements.
  • Test interactive elements (buttons, links) to ensure their states are clearly distinguishable with enough luminance difference.

Recommended combinations

Polished Steel

Ideal for sleek UI designs, corporate branding, or creating a sense of modern professionalism.

#57595D · #6A6C71 · #B5B7BB

Subtle Gradient

Creates visual depth and soft transitions, suitable for backgrounds or layered UI components.

#6A6C71 · #797B80 · #8C8E93

Industrial Edge

Effective for strong accents, data visualization, or highlighting key information in a robust manner.

#57595D · #8C8E93 · #6A6C71

CSS variables

:root {
  --metal-sheen-1: #6A6C71;
  --metal-sheen-2: #8C8E93;
  --metal-sheen-3: #B5B7BB;
  --metal-sheen-4: #57595D;
  --metal-sheen-5: #797B80;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metal-sheen": {
        1: "#6A6C71",
        2: "#8C8E93",
        3: "#B5B7BB",
        4: "#57595D",
        5: "#797B80",
      }
    }
  }
}

Related searches

grey minimalist palettemetal aesthetic colorsindustrial design palettesleek grey tonesmodern monochromatic

Palette colors

Hex values

Color 1#6A6C71
·
Color 2#8C8E93
·
Color 3#B5B7BB
·
Color 4#57595D
·
Color 5#797B80
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
1.3:1Fail
1.2:1Fail
2
1.6:1Fail
1.6:1Fail
2.1:1Fail
1.3:1Fail
3
2.6:1Fail
1.6:1Fail
3.5:1AA18
2.1:1Fail
4
1.3:1Fail
2.1:1Fail
3.5:1AA18
1.7:1Fail
5
1.2:1Fail
1.3:1Fail
2.1:1Fail
1.7:1Fail

Similar palettes

More like Metal Sheen

View all monochrome