: What exactly are Google's '500' color swatches? I've been reading up on Google's Material Design, and as I'm reading up on Style, they keep mentioning primary 500 colors (as well as any other

@Megan533

Here is the answer to your question.. check out this video


The 500s are Primary Colors perfect describing the dominant theme in your product and are great for toolbars.

700s are used for Status bars

and 300s are used for Secondary informations


So basically those numbers represent pre-defined shades and tints of Primary colors for specific section/parts of the design.

Vote Up Vote Down

@Gonzalez368

I'm going to leave this here because it is new information on the topic.
www.youtube.com/watch?t=73&v=xYkz0Ueg0L4
Published on May 28, 2015

A little rusty on your color theory? Material design makes color easy. Find out more about color and material design at google.com/design.
ETA:
The primary colors, (the 500) are colors that Google chose as the "main color" (or colors) that you base your design on. You start with the primary 500 then scale from light to dark; these colors are applied to different elements in the UI.

500s describe the dominant theme in the product (and are great for toolbars)
From there scale up to 700s for status bars
or down to a 300 for secondary information
The A colors are accent colors - brighter and more saturated encouraging interaction. These are perfect for highlighting primary action buttons, standard buttons, switches, and sliders.

What is interesting is that the information in this video seems to contradict with, or at least inconsistently expound upon, the information Google provides on their palette page mentioned above(http://www.google.com/design/spec/style/color.html#color-color-palette).

On the palette page they say "Google suggests using the 500 colors as the primary colors in your app and the other colors as accent colors"
In the video they say "The A colors are accent colors..."

Granted, subtle difference, but if Google is going to develop a style guide they should be consistent with the use of the word "accent."

Vote Up Vote Down

@Welton168

I've been wondering that myself.

First, "500" doesn't seem to indicate how many colors there are, but the weird numbering system they use. 500 is the base, 400 is lighter than the base, 600 is darker. That's pretty similar to how font-weights are numbered (info) so maybe that has something to do with it.

I've found that some of the numbers less than 500 are found by fading them into white ("Screen" blending mode in Photoshop) or black ("Multiply").


900: 59% (close)
600: 10% (almost exact)
500: Base
400: 15% (exact)
300: 30% (exact)
200: 50% (exact)
100: 70% (close)
50: 88% (exact)


I'm not seeing a pattern here. And maybe there isn't one. Or maybe there's something obvious I'm overlooking; I'm pretty bad at color-scheming.

Vote Up Vote Down

@Sue6373160

Perhaps you've already found this resource, but Google has put together an incredibly handy guide to help developers and designers sync up with the new Material vibe.

The whole guide can be found here - www.google.com/design/spec/material-design/introduction.html#
Specifically, this page makes all their favorite colors available for download - www.google.com/design/spec/style/color.html#color-color-palette

Vote Up Vote Down