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 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…


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.

Source : Link , Question Author : Cleverbird , Answer Author : BevansDesign

Leave a Comment