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

Question

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?

Answer 1

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

Answer 2

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(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

Answer 3

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.

Answer 4

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

Answer 5

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

1. Decide minimum and maximum shade you want in your palette
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.