Javascript - Generate Different Shades of the Same Color

Question

I would like to be able to call a function that takes a base color and returns an array of values that correspond to different shades of the same color. The array can contain ei

Answer 1

Shades can be generated by maintaining the ratio of the colors same. Suppose that your base color has (r,g,b) red, green, blue values.

So the ratio between the components is r:g:b. If you want to generate 10 shades then your shades would be.

(r/10, g/10, b/10)
(2*r/10, 2*g/10, 2*b/10)
(3*r/10, 3*g/10, 3*b/10)
(4*r/10, 4*g/10, 4*b/10) and so on

That's for the darker shades.

for lighter shades

(11*r/10, 11*g/10, 11*b/10)
(12*r/10, 12*g/10, 12*b/10)
(13*r/10, 13*g/10, 13*b/10) and so on

Check resulting values of r,g, b to not be more than 255 as lightening them increases their values.

In fact to avoid going over 255, you can check whichever of r,g,b is maximum and use that value to generate shades.

var max = Math.max(r,Math.max(g,b));

var step = 255 / (max * 10)
(r * step, g * step, b * step)
(r * step * 2, g * step * 2, b * step * 2)
(r * step * 3, g * step * 3, b * step * 3)