JavaScript函数返回给定颜色的“n”色调（从暗到亮）

Question

我想获得用于生成标签云的特定颜色的颜色范围。

假设用户输入了一些带有RGB/HHHHHH值的颜色，那么我想写一个函数f(color, no)，它返回RGB/HHHHHH为“不”的不同色调，从深色到浅色指定“颜色”。然后，这些颜色将用于显示具有相同色调的不同颜色的不同标签。但我想避免使用黑白色调。

以下是F({R:0, G:0, B:255}, 7)返回7蓝色阴影的示例。

我不希望任何RGB组合也是如此，例如(25, 150,150)。

这个功能是否可以使用JavaScript或是否有任何RGB公式可以实现这一点？

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>

在jsbin上你想要这样的东西吗？这是我使用jQuery构建的一个演示。

如果您有任何疑问，请告诉我。

Answer 2

您希望对饱和度和值进行操作，首先将rgb转换为hsv然后非常容易。

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

信息：http://en.wikipedia.org/wiki/HSL_and_HSV