In de volgende snippet staan de officiële kleuren van windows 8, de voorbeelden staan er ook bij hoe ze te gebruiken in combinatie met tiles.

Deze eerste reeks van kleuren is van de tiles die te vinden zijn op het start-scherm, zoals Mail, Agenda, Winkel, Video, Muziek en Berichten. Met deze tegels is er een verloop van links naar rechts, dat is donker naar licht voor beide maten van tegels.

Hier de complete stylesheet voorbeelden volgen beneden

/****************************
 Tile colors
****************************/

/* Teal */
.teal-dark  { background-color: #008299; }
.teal-light { background-color: #00A0B1; }

/* Blue */
.blue-dark  { background-color: #2672EC; }
.blue-light { background-color: #2E8DEF; }

/* Purple */
.purple-dark  { background-color: #8C0095; }
.purple-light { background-color: #A700AE; }

/* Dark Purple */
.dark-purple-dark  { background-color: #5133AB; }
.dark-purple-light { background-color: #643EBF; }

/* Red */
.red-dark  { background-color: #AC193D; }
.red-light { background-color: #BF1E4B; }

/* Orange */
.orange-dark  { background-color: #D24726; }
.orange-light { background-color: #DC572E; }

/* Green */
.green-dark  { background-color: #008A00; }
.green-light { background-color: #00A600; }

/* Sky Blue */
.sky-blue-dark  { background-color: #094AB2; }
.sky-blue-light { background-color: #0A5BC4; }

/****************************
 Shaded colors
****************************/

/* Color 1 */
.color-1-s-1 { background-color: #2E1700; }
.color-1-s-2 { background-color: #632F00; }
.color-1-s-3 { background-color: #261300; }
.color-1-s-4 { background-color: #543A24; }

/* Color 2 */
.color-2-s-1 { background-color: #4E0000; }
.color-2-s-2 { background-color: #B01E00; }
.color-2-s-3 { background-color: #380000; }
.color-2-s-4 { background-color: #61292B; }

/* Color 3 */
.color-3-s-1 { background-color: #4E0038; }
.color-3-s-2 { background-color: #C1004F; }
.color-3-s-3 { background-color: #40002E; }
.color-3-s-4 { background-color: #662C58; }

/* Color 4 */
.color-4-s-1 { background-color: #2D004E; }
.color-4-s-2 { background-color: #7200AC; }
.color-4-s-3 { background-color: #250040; }
.color-4-s-4 { background-color: #4C2C66; }

/* Color 5 */
.color-5-s-1 { background-color: #1F0068; }
.color-5-s-2 { background-color: #4617B4; }
.color-5-s-3 { background-color: #180052; }
.color-5-s-4 { background-color: #423173; }

/* Color 6 */
.color-6-s-1 { background-color: #001E4E; }
.color-6-s-2 { background-color: #006AC1; }
.color-6-s-3 { background-color: #001940; }
.color-6-s-4 { background-color: #2C4566; }

/* Color 7 */
.color-7-s-1 { background-color: #004D60; }
.color-7-s-2 { background-color: #008287; }
.color-7-s-3 { background-color: #004050; }
.color-7-s-4 { background-color: #306772; }

/* Color 8 */
.color-8-s-1 { background-color: #004A00; }
.color-8-s-2 { background-color: #199900; }
.color-8-s-3 { background-color: #003E00; }
.color-8-s-4 { background-color: #2D652B; }

/* Color 9 */
.color-9-s-1 { background-color: #15992A; }
.color-9-s-2 { background-color: #00C13F; }
.color-9-s-3 { background-color: #128425; }
.color-9-s-4 { background-color: #3A9548; }

/* Color 10 */
.color-10-s-1 { background-color: #E56C19; }
.color-10-s-2 { background-color: #FF981D; }
.color-10-s-3 { background-color: #C35D15; }
.color-10-s-4 { background-color: #C27D4F; }

/* Color 11 */
.color-11-s-1 { background-color: #B81B1B; }
.color-11-s-2 { background-color: #FF2E12; }
.color-11-s-3 { background-color: #9E1716; }
.color-11-s-4 { background-color: #AA4344; }

/* Color 12 */
.color-12-s-1 { background-color: #B81B6C; }
.color-12-s-2 { background-color: #FF1D77; }
.color-12-s-3 { background-color: #9E165B; }
.color-12-s-4 { background-color: #AA4379; }

/* Color 13 */
.color-13-s-1 { background-color: #691BB8; }
.color-13-s-2 { background-color: #AA40FF; }
.color-13-s-3 { background-color: #57169A; }
.color-13-s-4 { background-color: #7F6E94; }

/* Color 14 */
.color-14-s-1 { background-color: #1B58B8; }
.color-14-s-2 { background-color: #1FAEFF; }
.color-14-s-3 { background-color: #16499A; }
.color-14-s-4 { background-color: #6E7E94; }

/* Color 15 */
.color-15-s-1 { background-color: #569CE3; }
.color-15-s-2 { background-color: #56C5FF; }
.color-15-s-3 { background-color: #4294DE; }
.color-15-s-4 { background-color: #6BA5E7; }

/* Color 16 */
.color-16-s-1 { background-color: #00AAAA; }
.color-16-s-2 { background-color: #00D8CC; }
.color-16-s-3 { background-color: #008E8E; }
.color-16-s-4 { background-color: #439D9A; }

/* Color 17 */
.color-17-s-1 { background-color: #83BA1F; }
.color-17-s-2 { background-color: #91D100; }
.color-17-s-3 { background-color: #7BAD18; }
.color-17-s-4 { background-color: #94BD4A; }

/* Color 18 */
.color-18-s-1 { background-color: #D39D09; }
.color-18-s-2 { background-color: #E1B700; }
.color-18-s-3 { background-color: #C69408; }
.color-18-s-4 { background-color: #CEA539; }

/* Color 19 */
.color-19-s-1 { background-color: #E064B7; }
.color-19-s-2 { background-color: #FF76BC; }
.color-19-s-3 { background-color: #DE4AAD; }
.color-19-s-4 { background-color: #E773BD; }

Voorbeeld Basis Tiles

De volgende kleuren zijn te vinden op het Windows 8 gepersonaliseerde startscherm die je zelf kunt aanpassen. Voor elke kleur worden er vier kleuren met verschillende tinten weergegeven. De kleuren heb ik aangeduid met een s-X notatie (waar X een shade-kleurnummer is) Hier is presentatie van de kleuren

Hoe de shade classes te gebruiken

Voorbeeld tiles met shades

Download

Download CSS