: 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

@Eichhorn212

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

Vote Up Vote Down

@Vandalay110

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

Vote Up Vote Down

@Margaret771

Have you tried working with Adobe's Color Wheel? I think it's a bit more flexible than the SlayerOffice tool you're using.
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.

Vote Up Vote Down

@Becky351

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

Vote Up Vote Down