Back to palettes

Palette

Metro Grid Hues

A cool, somber collection of greys and silvers, capturing the muted atmosphere of a rainy metropolitan street.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Metro Grid Hues 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 Metro Grid Hues.

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

Data visualization

#343A40#6C757D#ADB5BD#CED4DA#495057

Palette guide

How to use Metro Grid Hues

Overview

The Metro Grid Hues palette offers a cool, somber collection of greys and silvers, capturing the muted atmosphere of a rainy metropolitan street. With deep, anchoring tones like #343A40 and #495057, it provides a robust foundation for modern designs. Lighter, airy shades such as #6C757D, #ADB5BD, and the very light #CED4DA complete the collection, creating a sleek and minimalist aesthetic. This palette is ideal for designers and developers seeking to evoke urban sophistication, a sense of calm, and a clean, structured feel, perfect for professional and contemporary digital experiences.

Best used for

  • Urban development and real estate branding
  • Tech startups and corporate websites
  • Data dashboards and analytical interfaces
  • Sleek app interfaces and mobile design
  • Automotive design concepts and presentations
  • Minimalist art galleries or portfolios

Suggested color roles

primary

Use #343A40 as a deep, anchoring primary color for strong headers, crucial text, or impactful brand elements.

secondary

Employ #495057 as a slightly lighter, strong supportive secondary for subheadings, navigation, or background sections.

accent

Apply #ADB5BD for mid-light, subtle contrast, interactive elements, or to create visual separation.

background

Utilize #CED4DA as the lightest, clean canvas background to ensure optimal readability for darker text.

text

For optimal readability, use #343A40 or true black on lighter backgrounds like #CED4DA.

Accessibility notes

  • Prioritize #343A40 or #495057 for main body text on #CED4DA to ensure optimal readability and WCAG compliance.
  • Ensure interactive elements (buttons, links) have clear contrast against their backgrounds.
  • Avoid low contrast between mid-tones like #6C757D and #ADB5BD for small text or critical information.
  • Check luminance differences to ensure clarity for users with visual impairments.

Recommended combinations

Urban Anchor

Creates a strong, stable foundation for branding, main content areas, and clear header/body text.

#343A40 · #495057 · #CED4DA

Concrete Layers

Ideal for layered UI elements, background panels, or subtle visual depth in interfaces.

#6C757D · #ADB5BD · #CED4DA

Grid Contrast

Effective for data representation, strong calls to action, or creating clear visual hierarchy.

#343A40 · #ADB5BD · #6C757D

CSS variables

:root {
  --metro-grid-hues-1: #343A40;
  --metro-grid-hues-2: #6C757D;
  --metro-grid-hues-3: #ADB5BD;
  --metro-grid-hues-4: #CED4DA;
  --metro-grid-hues-5: #495057;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metro-grid-hues": {
        1: "#343A40",
        2: "#6C757D",
        3: "#ADB5BD",
        4: "#CED4DA",
        5: "#495057",
      }
    }
  }
}

Related searches

urban grey palettemodern concrete colorssleek city designminimalist tech paletteneutral architectural tones

Palette colors

Hex values

Color 1#343A40
·
Color 2#6C757D
·
Color 3#ADB5BD
·
Color 4#CED4DA
·
Color 5#495057
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
5.5:1AA
7.7:1AAA
1.4:1Fail
2
2.5:1Fail
2.3:1Fail
3.1:1AA18
1.7:1Fail
3
5.5:1AA
2.3:1Fail
1.4:1Fail
3.9:1AA18
4
7.7:1AAA
3.1:1AA18
1.4:1Fail
5.5:1AA
5
1.4:1Fail
1.7:1Fail
3.9:1AA18
5.5:1AA

Similar palettes

More like Metro Grid Hues

View all neutral
Concrete Jungle Bloom
Minimalist Stone Carve
Stone Hearth Comfort
Urban Canvas Grey
Urban Concrete Bloom
Urban Concrete Dusk