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