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