Color Win8

Windows 8 style color palette reference

Windows 8 Color Palette

Windows 8 introduced a revolutionary flat design approach in 2012, replacing the skeuomorphic Aero glass effects of Windows 7 with bold, solid colors and clean typography. The color palette was carefully curated to work across the Start Screen tiles, apps, and system UI.

πŸ“±
Historical Context: Windows 8 was a watershed moment in UI design. Its bold move to flat design influenced the entire industry β€” Apple followed with iOS 7 in 2013, and Google introduced Material Design in 2014. The Windows 8 palette was designed to look vibrant on both desktop monitors and the new generation of touch-screen devices.

The 21 Accent Colors

Windows 8 offered users 21 accent colors to personalize their Start Screen. Click any swatch to copy its hex code.

Lime#A4C400
Green#60A917
Emerald#008A00
Teal#00ABA9
Cyan#1BA1E2
Cobalt#0050EF
Indigo#6A00FF
Violet#AA00FF
Pink#F472D0
Magenta#D80073
Crimson#A20025
Red#E51400
Orange#FA6800
Amber#F0A30A
Yellow#E3C800
Brown#825A2C
Olive#6D8764
Steel#647687
Mauve#76608A
Sienna#A0522D
Dark#1D1D1D

Start Screen Preview

See how the Windows 8 Start Screen looked with the selected accent color. Click any tile color above to change the preview.

Start
Mail
Calendar
Photos
Maps
Weather
Music
Store
Settings
People
Camera
Games
News

Color Reference Table

SwatchNameHexRGB
Lime#A4C400rgb(164, 196, 0)
Green#60A917rgb(96, 169, 23)
Emerald#008A00rgb(0, 138, 0)
Teal#00ABA9rgb(0, 171, 169)
Cyan#1BA1E2rgb(27, 161, 226)
Cobalt#0050EFrgb(0, 80, 239)
Indigo#6A00FFrgb(106, 0, 255)
Violet#AA00FFrgb(170, 0, 255)
Pink#F472D0rgb(244, 114, 208)
Magenta#D80073rgb(216, 0, 115)
Crimson#A20025rgb(162, 0, 37)
Red#E51400rgb(229, 20, 0)
Orange#FA6800rgb(250, 104, 0)
Amber#F0A30Argb(240, 163, 10)
Yellow#E3C800rgb(227, 200, 0)
Brown#825A2Crgb(130, 90, 44)
Olive#6D8764rgb(109, 135, 100)
Steel#647687rgb(100, 118, 135)
Mauve#76608Argb(118, 96, 138)
Sienna#A0522Drgb(160, 82, 45)
Dark#1D1D1Drgb(29, 29, 29)

Using Windows 8 Colors in CSS

:root {
  /* Windows 8 Accent Colors */
  --win8-lime: #A4C400;
  --win8-green: #60A917;
  --win8-emerald: #008A00;
  --win8-teal: #00ABA9;
  --win8-cyan: #1BA1E2;
  --win8-cobalt: #0050EF;
  --win8-indigo: #6A00FF;
  --win8-violet: #AA00FF;
  --win8-pink: #F472D0;
  --win8-magenta: #D80073;
  --win8-crimson: #A20025;
  --win8-red: #E51400;
  --win8-orange: #FA6800;
  --win8-amber: #F0A30A;
  --win8-yellow: #E3C800;
}

/* Windows 8 style tile */
.win8-tile {
  background-color: var(--win8-cobalt);
  color: #ffffff;
  padding: 1rem;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 200;
  position: relative;
}

.win8-tile::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0.5rem;
  left: 0.75rem;
  font-size: 0.8rem;
}

Design Legacy

The Windows 8 color palette evolved through Windows 8.1, Windows 10, and into Windows 11. While newer versions expanded the personalization options (Windows 10 introduced 48 accent colors and Windows 11 added automatic accent color extraction from wallpapers), the original 21-color palette remains iconic and widely referenced in design resources.

πŸ’‘
Modern Usage:These colors are still excellent choices for flat UI design. They’re carefully balanced for vibrancy and readability, and most work well as accent colors against both light and dark backgrounds. The Cobalt (#0050EF) and Teal (#00ABA9) are especially popular in modern web design.
⚠️
Some of these colors (particularly Lime, Yellow, and Amber) may have insufficient contrast against white backgrounds for text usage. Always verify contrast ratios when using these as text colors per WCAG guidelines.