Google's material design specifications have sets of colour palettes:

enter image description here

Starting with a base primary colour, which they designate as "500", they then have a range of incremental steps of shade, brighter and darker, to create a range of about 10 colours. The lightest is designated "50", and is near white, and the darkest, "900", is near black, but both retain some of the base colour.

I can't quite determine how the increments are calculated. I tried this online swatch generator, but I can't seem to dial in the range.

I think it's just a matter of adjusting luminosity up and down from the base "500" color, and I'm guessing that a value of "0" would be pure white and "1000" would be pure black, but the ranges in Google's palette's seem to have more saturation than a simple luminosity range.

Does anyone know what algorithm or process I can use to take a base colour and generate a palette in line with Google's palettes?

  • They seem to be the base color with the saturation and value respectively increased or decreased inversely as the number goes up or down – Supuhstar Sep 3 '14 at 6:09
  • 1
    Actually, taking a step back from the screen, it appears to use a similar algorithm as phong shading... I'll have to consider this – Supuhstar Sep 3 '14 at 6:11
  • Did you found any solution to generate the palette? – MrBrightside Oct 22 '14 at 12:25
  • @MrBrightside Howdy! You can generate a palette using the chosen answer, here: mcg.mbitson.com - Please note that the colors are not exactly the same as the Material Design palettes, though you can import the exact palettes or generate close representations with custom colors. More on why they're not the exact colors here : stackoverflow.com/questions/32942503/… – Mikel Bitson Nov 10 '15 at 16:11
  • I generate their colors using their MDL library and assigning their respective color classes. From there, I use JavaScript to .getComputedStyle. see https://rack.pub/swatch – Ron Royston Jul 3 '16 at 3:02
up vote 36 down vote accepted

I made this little CSS3/AngularJS tool for a project to generate Material Colors palettes. You can enter your 500 hex color and use an external tool like ColorZilla to get the color values from there. Also the lighter ones are exactly the ones Google used, but the darker ones are off by a little.

mcg.mbitson.com

  • Your palette generator works really well, and as far as I can see, approximates the Google Material Design standards. One thing: you might want to create more contrast for the text on the page. The black text on the dark grey background is very hard to read. – Questioner Apr 15 '15 at 5:57
  • 2
    Hey Guys! I'm the developer behind the updated version of the tool. I've recently be changing around the way I'm handling the color generation. If anyone has any direct feedback for this tool- it's color generation technique or any additional features they'd like, please let me know! I'm still developing enhancements in my spare time and I fear the color generation may be off, though still very helpful. I'll continue to look into it. – Mikel Bitson Oct 20 '15 at 13:03
  • 1
    @MikelBitson The palette generator is indeed off (just enter any 500 colour from the material design standard and compare to see), however it works fantastic with many other base colours nonetheless. Keep up the great work! – Chris Bornhoft Nov 6 '15 at 19:13
  • 1
    @MikelBitson Fantastic explanation thanks. I figured it was something like this even before I posted my original comment. I wonder how much Google's "Official Colour Picker" makes? What a title :) – Chris Bornhoft Nov 10 '15 at 14:36
  • 1
    Updated link for those of you looking for the new version: mcg.mbitson.com/# – Mikel Bitson Oct 24 '16 at 18:42

The google palettes are monochromatic. Which keeps the same RGB ratio shifting the Lightness and saturation up or down. To do this you have to convert the RGB value to HSL representation (Hue, Saturation, Lightness), alter the lightness and saturation then convert back if need be. It is possible to keep it in the RGB space while calculating, but the math is too confusing (for me to understand or explain). HSL was created for traditional color mixing (its easier for us to think about).

If your objective is to make CSS palettes you can keep the colour in HSL using background-color: hsl(0,100%, 50%);.

You can do this manually in Photoshop using the colour picker. The HSB is for Hue Saturation Brightness (Synonymous with HSL, same thing). Pick a hue you like and alter the Saturation and Brightness by a consistent value. In the image below S=54 and B=77, shift up by 5% using 54 + 54 * 0.05 and 77 + 77 * 0.05. Or to shift down S - S * 0.05

photoshop colour picker

Side note to clarify between Hex & RGB. The 6 digit HEX #FFEB3B is actually 3 separate numbers, representing RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3B converting the HEX values to decimal gives you red:255 green:235 blue:59 OR rgb(255,235,59).

There are algorithms to convert RGB to HSL if you really want them on Wikipedia but the simplest way is to use a colour lib. This example makes a monochromatic palette with please.js it also has other algorithms for creating complementary or pleasing palettes. Much like kuler.adobe, which also rocks.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]
  • 3
    Google's own palettes do not show a steady brighness gradient across HSV/HSB. I've created an illustration so you can see what I'm talking about. Based on that, you'd probably be better off playing with one of the other color models. Additionally, they seem to have tweaked their hue a little for the darker shades of some colors, to keep them from getting muddy. – Tess Jul 12 '15 at 21:07
  • I would like to add a bit here that seconds @Tess's response.. I've developed the enhanced version of the MCG generator and in the process I've noticed a few things. Each google palette follows a different progression of colors, it is not monochromatic. There is no formula or method to mimic the colors exactly- as the formula for each palette ends up being completely different. More details and an example of this can be found here: github.com/mbitson/mcg/issues/19 – Mikel Bitson Nov 2 '15 at 21:33
  • @MikelBitson But in answer to the question 'what algorithm or process I can use' I would vote for monochromatic or a version of it en.wikipedia.org/wiki/Monochromatic_color But you and Tess are right its not strictly mono, they deviate from the hue. – Lex Nov 3 '15 at 8:36
  • 1
    @Lex - I agree with you, I'd use monochromatic to estimate a palette. I only seconded Tess's response because your answer states that "The google palettes are monochromatic." and I have spent a good deal of time recently struggling with these colors. :) – Mikel Bitson Nov 3 '15 at 13:16
  • HSB/HSV is not the same as HSL en.wikipedia.org/wiki/HSL_and_HSV – Kevin Thibedeau Apr 16 '17 at 18:48

Have you tried working with Adobe's Color Wheel? I think it's a bit more flexible than the SlayerOffice tool you're using.

https://color.adobe.com/

For your exact case, choose "Shades" and try fooling around from there. It won't generate material-design like swatches, but it's a start.

You could just download the palettes that Google give a link to on the site? Since it gives you all of the colors?

Google Color Swatches Zip

  • 10
    I think OP wanted to know how to start with his own color and generate a similar swatch – Supuhstar Sep 3 '14 at 6:12

protected by Mᴏɴᴋᴇʏ Jan 26 '15 at 3:05

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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