Color Metro UI
Metro UI design system color palette
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.
- Content over chrome — Focus on the content, not the UI frame
- Typography as design — Clean, clear typographic hierarchy
- Bold, flat colors — Vibrant, saturated accent colors
- Motion brings life — Smooth, purposeful animations
- Authentically digital — Embraces the digital medium rather than mimicking physical objects
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
| Swatch | Name | Hex | Best Text Color |
|---|---|---|---|
| Light Green | #99b433 | Black | |
| Green | #00a300 | White | |
| Dark Green | #1e7145 | White | |
| Magenta | #ff0097 | White | |
| Light Purple | #9f00a7 | White | |
| Purple | #7e3878 | White | |
| Dark Purple | #603cba | White | |
| Teal | #00aba9 | White | |
| Light Blue | #eff4ff | Black | |
| Blue | #2d89ef | White | |
| Dark Blue | #2b5797 | White | |
| Yellow | #ffc40d | Black | |
| Orange | #e3a21a | Black | |
| Dark Orange | #da532c | White | |
| Red | #ee1111 | White | |
| Dark Red | #b91d47 | White | |
| Dark Crimson | #831515 | White |
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:
How to Use Color Metro UI?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.