What exactly are Google's '500' color swatches?

Question

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 number ranging from 50, which is almost white, to 900), but what does this mean?

I'd love to try my hand at creating my own "Material inspired" color swatches, but as the naming of their colors confuse me, I'm not quite sure where to start. I tried googling for an answer (which somehow feels a bit ironic), but so far I havent found much conclusive answers. If I had to guess, it seems like it has something to do with the color's wavelength?

There's also mention of A100 to A700 colors...

Answer 1

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.

Answer 2

I'm going to leave this here because it is new information on the topic.

https://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 www.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."

Answer 3

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 - http://www.google.com/design/spec/material-design/introduction.html#

Specifically, this page makes all their favorite colors available for download - http://www.google.com/design/spec/style/color.html#color-color-palette

Answer 4

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.

Answer 5

In my opinion, the naming convention is based on the webfont weight-naming convention:

• 500: base
• < 500: thinner / lighter
• > 500: thicker / darker

A very useful and logical way of naming something with a baseline and variations.

Reference link: Link to Inter font's GitHub page

As an example here is a screenshot of Mozilla's "Inter" font that utilizes such font weight-naming but in their case, the regular/base weight is numbered as 400. A lot of fonts actually use 400 as "regular" weight but this is another topic.