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:

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