Javascript Function To Return "n" Shades Of A Given Color From (dark To Light)

I would like to get the color range of the specific color for generating tag cloud. Say that user has entered some color with RGB/HHHHHH values then I would like to write a functi

Solution 1:

functiongenerate()
{
  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<inputtype="text"id="R"/></div><div>G<inputtype="text"id="G"/></div><div>B<inputtype="text"id="B"/></div><inputtype="button"onclick="generate()"value="Generate"/><divid="op">Generated Color shades</div>

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

Let me know if you have any doubts.

Solution 2:

You want to operate on saturation and value, convert rgb to hsv first and then it is very easy.

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

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