62

When I look at the start screen of my Windows 8 installation I see that bundled apps have colors from some standard(?) palette: IE and Weather have the same color, Store and Xbox Live Games, People and Music, Messaging and Maps, etc. It doesn't look like there's any logical connection between most of these apps. Yet their tiles share colors most likely coming from some standardized palette.

But when we create a Metro app in Visual Studio the Background color is preset to #464646 in a free form text field. So I wonder if there's some "official" list of the predefined colors we can use to make our own tiles "native" to Windows 8?

Obviously I can take a screenshot and pick a color from a bundled tile, but there has to be a better way and I've failed to find it so far.

Edit: apparently you can't even pick the color from a screenshot since a gradient is automatically applied to it by the OS:

If you make the space around the logo itself transparent in your image, your app's brand color (declared in the manifest) will show through with a gradient preapplied to it as part of the Windows 8 Release Preview look. http://msdn.microsoft.com/en-us/library/windows/apps/hh465403.aspx#using_default_tiles

2
  • 1
    Related ux.stackexchange.com/questions/17257/…
    – Alex K.
    Commented Jul 20, 2012 at 11:57
  • I don't see how this is related since there's no answer to this question in the design guidelines (at least I couldn't find it). All I can find there is statements like "Avoid the overuse of loud colors in tiles. Simple, clean, elegantly designed tiles will be more successful than those that scream for attention like a petulant child." Commented Jul 20, 2012 at 12:14

6 Answers 6

125

Check my Metro Design Guideline presentation at https://skydrive.live.com/view.aspx?resid=40CFFDE85F1AB56A!1284 slide 55

The colors are:

PURPLE
RGB 162 0 255
A200FF

MAGENTA
RGB 255 0 151
FF0097

TEAL
RGB 0 171 169
00ABA9

LIME
RGB 140 191 38
8CBF26

BROWN
RGB 160 80 0
A05000

PINK
RGB 230 113 184
E671B8

ORANGE
RGB 240 150 9
F09609

BLUE
RGB 27 161 226
1BA1E2

RED
RGB 229 20 0
E51400

GREEN
RGB 51 153 51
339933
2
  • 2
    Updated values for WP8 and Windows 8 at skydrive.live.com/#!/…
    – LBugnion
    Commented May 2, 2013 at 8:17
  • 1
    I felt like a kid on Christmas morning again when I found this post! Kudos and a +1 Commented Jun 6, 2013 at 13:36
31

the colors from the presentation referenced are actually the Windows Phone theme colors. The Windows 8 core colors are different from the phone colors. I just published a blog post about the tile and Start Screen colors in Windows 8. You might find it useful. http://www.creepyed.com/2012/09/windows-8-colors-hex-code/. I hope it helps!

3
  • 1
    Nice post. Just to be clear however, the design guidelines don't call for a specific color pallet. Commented Sep 1, 2012 at 12:01
  • That's true! I just like having colors that match for mock-ups and projects that I do. :)
    – creepyed
    Commented Sep 2, 2012 at 1:50
  • great for the windows phone 8 colours :)
    – user115422
    Commented Feb 17, 2013 at 0:14
8

Really good project. Features all Windows 8 Colors. http://metrocolours.softwareportalplus.com/

0
3

Sorry for posting to an old thread but I guess many who comes from search engines will find this useful. This is a great resource on metro colors that I discovered when creating "metro inspired" design for my client.

http://colorlib.com/etc/metro-colors

All colors and color codes are there including HEX, RGB, CMYK, etc.

1

There is an official list for the Windows Phone 8 if you want:
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402557(v=vs.105).aspx

0

I know its an old question... But still want to contribute.. Here is a link and visual representation of tile and tile color.....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.