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

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

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
– Ky -
Sep 3, 2014 at 6:09
• Actually, taking a step back from the screen, it appears to use a similar algorithm as phong shading... I'll have to consider this
– Ky -
Sep 3, 2014 at 6:11
• Did you found any solution to generate the palette? Oct 22, 2014 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/… Nov 10, 2015 at 16:11
• Material is ONLY monochromatic for the 50-500 range, see codepen.io/sebilasse/pen/GQYKJd?editors=1010 for darker and accent colors … Mar 1, 2018 at 13: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

• 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. Apr 15, 2015 at 5:57
• 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. Oct 20, 2015 at 13:03
• @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! Nov 6, 2015 at 19:13
• @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 :) Nov 10, 2015 at 14:36
• Updated link for those of you looking for the new version: mcg.mbitson.com/# Oct 24, 2016 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`

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(
{scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]
``````
• 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, 2015 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 Nov 2, 2015 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, 2015 at 8:36
• @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. :) Nov 3, 2015 at 13:16
• HSB/HSV is not the same as HSL en.wikipedia.org/wiki/HSL_and_HSV Apr 16, 2017 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.

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?

• I think OP wanted to know how to start with his own color and generate a similar swatch
– Ky -
Sep 3, 2014 at 6:12

To generate color gradient/palette from given color, essentially you can use following algorithm.

2. Divide 'color-space' between these colors in equal partition (see below)
3. Output colors on these steps

For dividing color-space between, first you can convert color your HEX into RGB. Select values in each channel. Let's say you have color1 (r1, g1, b1) and color2 (r2, g2, b2). And you want 3 colors between color1 and color2, then you can do something like following

``````all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
r1 += rdelta
g1 += gdelta
b1 += bdelta
all_colors.append((r1, g1, b1))
``````

Remember to convert RGB values between (0 to 1).

In your case, you can take base color and divide color space between `white to basecolor` and `basecolor to black`. You can adjust your steps according to your need.

Finally, I am going to do some shameless promotion of the python library I created, just because it is relevant to this question regarding color palette generation. It is called SecretColors. You can generate own color palettes, gradients or use standard color palettes like IBM, Material Design, ColorBrewer or Clarity.