Back to palettes

Palette

Metro Grid Serene

A sleek, modern aesthetic inspired by urban architecture's quiet lines and metallic sheen.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#6B6B6B#AFAFAF#E0E0E0#4A4A4A

Palette guide

How to use Metro Grid Serene

Overview

The Metro Grid Serene palette offers a sleek, modern aesthetic inspired by urban architecture's quiet lines and metallic sheen. This collection features a range of sophisticated greys, from the deep, anchoring #2C2C2C and #4A4A4A to the lighter, shimmering #6B6B6B, #AFAFAF, and the airy #E0E0E0. It's an excellent choice for designers and developers seeking to create clean, structured, and elegant digital experiences or brand identities. The palette conveys a sense of calm professionalism and contemporary style, perfect for projects that demand a refined and minimalist approach with strong visual clarity.

Best used for

  • High-end fashion websites and luxury branding
  • Minimalist photography portfolios and galleries
  • Modern art exhibition design and catalogs
  • Tech product launch sites and app interfaces
  • Urban planning and architectural presentations
  • Corporate and professional service websites

Suggested color roles

primary

Use #2C2C2C as a deep, strong anchor for prominent headers, key brand elements, or crucial information.

secondary

Employ #4A4A4A as a robust, supportive grey for subheadings, navigation, or background sections.

accent

Apply #AFAFAF for mid-light, subtle highlights, interactive elements, or to create visual breaks.

background

Utilize #E0E0E0 as a very light, clean background to provide an expansive canvas and ensure text readability.

text

For optimal readability, use #2C2C2C or true black on lighter backgrounds like #E0E0E0.

Accessibility notes

  • Prioritize #2C2C2C or #4A4A4A for all body text on #E0E0E0 to ensure optimal readability and WCAG compliance.
  • Check contrast ratios for buttons and links to ensure they are easily distinguishable in all states.
  • Avoid using #AFAFAF for small or critical text on #E0E0E0, as contrast may be insufficient.
  • Ensure sufficient luminance difference for visual cues and interactive elements.

Recommended combinations

Sleek Foundation

Excellent for corporate identities, clean web layouts, and establishing a strong, modern base.

#2C2C2C · #4A4A4A · #E0E0E0

Metallic Layers

Ideal for subtle backgrounds, UI components, or creating depth without visual clutter.

#6B6B6B · #AFAFAF · #E0E0E0

Bold Urban

Effective for strong headers, graphical elements, or highlighting key information with impact.

#2C2C2C · #AFAFAF · #6B6B6B

CSS variables

:root {
  --metro-grid-serene-1: #2C2C2C;
  --metro-grid-serene-2: #6B6B6B;
  --metro-grid-serene-3: #AFAFAF;
  --metro-grid-serene-4: #E0E0E0;
  --metro-grid-serene-5: #4A4A4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metro-grid-serene": {
        1: "#2C2C2C",
        2: "#6B6B6B",
        3: "#AFAFAF",
        4: "#E0E0E0",
        5: "#4A4A4A",
      }
    }
  }
}

Related searches

minimalist grey paletteurban architecture colorsmodern sleek designconcrete grey tonessophisticated monochrome

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#6B6B6B
·
Color 3#AFAFAF
·
Color 4#E0E0E0
·
Color 5#4A4A4A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.6:1Fail
6.4:1AA
10.6:1AAA
1.6:1Fail
2
2.6:1Fail
2.4:1Fail
4:1AA18
1.7:1Fail
3
6.4:1AA
2.4:1Fail
1.7:1Fail
4:1AA18
4
10.6:1AAA
4:1AA18
1.7:1Fail
6.7:1AA
5
1.6:1Fail
1.7:1Fail
4:1AA18
6.7:1AA

Similar palettes

More like Metro Grid Serene

View all neutral
Concrete Garden Grey
Steel Frame Grit
Urban Loft Serene
Architectural Concrete Edge
Bare Concrete Stillness
Brutalist Bloom Grey