JavaScript function to return the "n" shades of a given color (from dark to light)

Question

I would like to get a range of colors for a specific color to create a tag cloud.

Say that the user has entered some color with RGB/HHHHHH values, then I would like to write a function f(color, no) that returns RGB/HHHHHH for "no" different shades from dark to light colors for the specified "color". These colors will then be useful for displaying different tags with different colors of the same hue. But I would like to avoid black and white shades.

The following is an example of F({R:0, G:0, B:255}, 7) that returns 7 shades of blue.

I would not want this to be true for any combination of RGB, for example, (25, 150,150) .

Is it possible to use this function using JavaScript, or is there any formula for RGB with which this can be achieved?

Answer 1

 function generate() { var r = document.querySelector("#R").value%256; var g = document.querySelector("#G").value%256; var b = document.querySelector("#B").value%256; var str=""; for(var i=0;i<7;i++) { r+=33; g+=33; b+=33; str+="<div class='swatch' style='background-color:rgb("+r+","+g+","+b+")'></div>"; } document.querySelector("#op").innerHTML = str; console.log(str); } 

 .swatch{width:50px;height:25px;margin:1px} 

 <div>R<input type="text" id="R"/></div> <div>G<input type="text" id="G"/></div> <div>B<input type="text" id="B"/></div> <input type="button" onclick="generate()" value="Generate"/> <div id="op">Generated Color shades</div> 

Do you want something like this on jsbin ? This is a demo that I created using jQuery.

Let me know if you have any doubts.

Answer 2

You want to work with saturation and value, first convert rgb to hsv and then it is very simple.

Code: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

Information: http://en.wikipedia.org/wiki/HSL_and_HSV