Color Metro UI

Metro UI Color Palette

Metro UI (also known as Modern UI) is the design language created by Microsoft for Windows Phone 7 and later adopted across Windows 8 and other Microsoft products. It emphasizes bold, flat colors, clean typography, and content-focused layouts.

Official Metro Colors

The following 17 colors form the official Metro UI palette. Click any swatch to copy the hex code. These colors are designed to be vibrant and highly legible on both light and dark backgrounds.

Color Reference Table

Using Metro Colors in CSS

:root {
  /* Metro UI Accent Colors */
  --metro-green: #00a300;
  --metro-blue: #2d89ef;
  --metro-red: #ee1111;
  --metro-purple: #7e3878;
  --metro-teal: #00aba9;
  --metro-orange: #da532c;
  --metro-magenta: #ff0097;
}

/* Metro-style tile */
.metro-tile {
  background-color: var(--metro-blue);
  color: #ffffff;
  padding: 1.5rem;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
}

/* Metro navigation item */
.metro-nav-item {
  background: var(--metro-teal);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Metro Tile Example

Metro UI is famous for its tile-based interface. Here’s how these colors work in a tile layout: