Palette

Metropolis Gleam

A modern, sophisticated range of grays mirroring the steel and glass of a bustling metropolis.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B1B1B#3A3A3A#6E6E6E#B0B0B0#E8E8E8

Palette guide

How to use Metropolis Gleam

Overview

The Metropolis Gleam palette presents a modern, sophisticated range of grays mirroring the steel and glass of a bustling metropolis. From the deepest, commanding #1B1B1B to the strong #3A3A3A, it establishes a powerful presence. Lighter, gleaming shades like #6E6E6E, #B0B0B0, and the expansive #E8E8E8 complete the collection, offering an elegant monochromatic scheme. This palette is perfect for designers and developers aiming to create high-tech interfaces, luxury branding, or professional digital experiences that convey strength, clarity, and a timeless, cutting-edge aesthetic. It balances dark intensity with refined lightness.

Best used for

High-tech product interfaces and software design
Luxury real estate and automotive branding
Corporate identity and professional portfolios
Modern art exhibitions and digital displays
Architectural visualization and presentations
Sleek and minimalist web design

Suggested color roles

primary

Use #1B1B1B as the deepest, commanding dark for prominent headers, brand logos, or critical information.

secondary

Employ #3A3A3A as a strong, supportive grey for subheadings, navigation, or significant content blocks.

accent

Apply #B0B0B0 for light, subtle gleam, interactive elements, or to create visual separation.

background

Utilize #E8E8E8 as a near-white, expansive canvas background to provide maximum contrast and readability.

text

For ultimate readability, use #1B1B1B or true black on lighter backgrounds like #E8E8E8.

Accessibility notes

Prioritize #1B1B1B or #3A3A3A for text on #E8E8E8 to meet WCAG contrast standards for readability.
Ensure interactive elements have robust contrast to clearly indicate their functionality and states.
Avoid using #B0B0B0 for small or critical text elements on light backgrounds due to potential low contrast.
Test for color blindness compatibility, especially with similar mid-grey tones.

Recommended combinations

City Night

Excellent for bold statements, high-contrast UI, and creating a dramatic, sophisticated look.

#1B1B1B · #3A3A3A · #E8E8E8

Steel Glimmer

Ideal for layered backgrounds, subtle highlights, and adding depth to minimalist interfaces.

#6E6E6E · #B0B0B0 · #E8E8E8

Architectural Depth

Effective for strong visuals, data presentation, or establishing a clear visual hierarchy.

#1B1B1B · #6E6E6E · #3A3A3A

CSS variables

:root {
  --metropolis-gleam-1: #1B1B1B;
  --metropolis-gleam-2: #3A3A3A;
  --metropolis-gleam-3: #6E6E6E;
  --metropolis-gleam-4: #B0B0B0;
  --metropolis-gleam-5: #E8E8E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metropolis-gleam": {
        1: "#1B1B1B",
        2: "#3A3A3A",
        3: "#6E6E6E",
        4: "#B0B0B0",
        5: "#E8E8E8",
      }
    }
  }
}

Hex values

Color 1#1B1B1B

Color 2#3A3A3A

Color 3#6E6E6E

Color 4#B0B0B0

Color 5#E8E8E8

Accessibility

Contrast checker

1.5:1Fail

3.4:1AA18

7.9:1AAA

14.1:1AAA

1.5:1Fail

2.2:1Fail

5.2:1AA

9.3:1AAA

3.4:1AA18

2.2:1Fail

2.4:1Fail

4.2:1AA18

7.9:1AAA

5.2:1AA

2.4:1Fail

1.8:1Fail

14.1:1AAA

9.3:1AAA

4.2:1AA18

1.8:1Fail

Similar palettes

More like Metropolis Gleam

Architectural Grid Hues

City Grid Graphite

City Loft Grey