JavaScript函数：根据给定颜色返回“n”个不同深浅程度的颜色

Question

我想获取特定颜色的颜色范围，以生成标签云。如果用户输入了一些具有RGB/HHHHHH值的颜色，那么我想编写一个函数f(color，no)，它将返回从深色到浅色的指定“颜色”的“no”种不同阴影的RGB/HHHHHH。这些颜色将有助于显示具有相同阴影不同颜色的不同标签。但我想避免其中的黑白色调。

以下是F（{R:0, G:0, B:255}，7）的示例，它返回蓝色的7个阴影。

我不希望对任何RGB组合都成立，例如（25,150,150）也不行。

这个函数是否可以使用JavaScript实现？或者是否有RGB公式可以实现这一点？

- Anil Namde

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构建的演示。

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

- Clyde Lobo

---

@AndrewMyers 完成 - Clyde Lobo

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

- Torsten Becker