How does one generate a palette similar to the ones in Google's material design?

49

23

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?

Questioner

Posted 2014-08-18T05:57:03.053

Reputation: 682

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 2016-07-03T03:02:12.390

Material is ONLY monochromatic for the 50-500 range, see https://codepen.io/sebilasse/pen/GQYKJd?editors=1010 for darker and accent colors …

sebilasse 2018-03-01T13:34:33.717

They seem to be the base color with the saturation and value respectively increased or decreased inversely as the number goes up or downSupuhstar 2014-09-03T06:09:51.550

1Actually, taking a step back from the screen, it appears to use a similar algorithm as phong shading... I'll have to consider thisSupuhstar 2014-09-03T06:11:35.903

Did you found any solution to generate the palette?MrBrightside 2014-10-22T12:25:17.733

@MrBrightside Howdy! You can generate a palette using the chosen answer, here: http://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 : http://stackoverflow.com/questions/32942503/material-design-color-palette/33487476#33487476

Mikel Bitson 2015-11-10T16:11:29.000

Answers

34

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

dave

Posted 2014-08-18T05:57:03.053

Reputation: 456

Great work!! You really should link the old version to the new version as it's just so much better. Thank you for this.Stijn de Witt 2016-02-20T20:58:58.233

1

Updated link for those of you looking for the new version: http://mcg.mbitson.com/#/

Mikel Bitson 2016-10-24T18:42:22.710

I think your generated colors look good (in the updated version). I'm pretty sure the google pallet is hand tweaked otherwise they would expose their generator (unless it is really clever). I am building an app where the client enters a main color and a complimentary color and it generates the whole scheme on the front end. thanks for the sample code.Scott Romack 2017-01-27T20:36:58.360

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 2015-04-15T05:57:44.230

Looking for the exact values Google generates with their palette. Used some of the code from your project: http://stackoverflow.com/q/32942503/1048340

Jared Rummler 2015-10-05T21:05:47.730

1Hey 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 2015-10-20T13:03:29.063

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 2015-11-06T19:13:51.433

@ChrisBornhoft Hey Chris! Thanks for the feedback, man. Yeah- I know they're off, but unfortunately this is truely unavoidable. Please see this issue thread for more information : https://github.com/mbitson/mcg/issues/19 Or this thread on stackoverflow for more information: http://stackoverflow.com/questions/32942503/material-design-color-palette/33487476#33487476

Mikel Bitson 2015-11-06T19:20:42.697

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 2015-11-10T14:36:42.587

13

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"]

Lex

Posted 2014-08-18T05:57:03.053

Reputation: 730

HSB/HSV is not the same as HSL https://en.wikipedia.org/wiki/HSL_and_HSV

Kevin Thibedeau 2017-04-16T18:48:27.733

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 2015-07-12T21:07:11.240

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: https://github.com/mbitson/mcg/issues/19

Mikel Bitson 2015-11-02T21:33:27.183

@MikelBitson But in answer to the question 'what algorithm or process I can use' I would vote for monochromatic or a version of it https://en.wikipedia.org/wiki/Monochromatic_color But you and Tess are right its not strictly mono, they deviate from the hue.

Lex 2015-11-03T08:36:09.570

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 2015-11-03T13:16:00.010

1

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.

sharedphysics

Posted 2014-08-18T05:57:03.053

Reputation: 104

0

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

McIvor

Posted 2014-08-18T05:57:03.053

Reputation: 442

9I think OP wanted to know how to start with his own color and generate a similar swatchSupuhstar 2014-09-03T06:12:47.477