如何生成特定颜色的随机阴影列表？(例如橙色的随机阴影)

Question

有没有人遇到过选择特定颜色的随机色调的方法？起初听起来很傻,但我想要做的是想出一种自动生成图表系列颜色的方法,这些颜色需要打上标签.因此,有一种方法可以为特定颜色范围生成一系列颜色值似乎是合理的; 我在网上有一些例子,但不是逻辑.

所以我正在寻找一种方式来说明:生成一系列红色,橙色或绿色的色调等等."好吧,什么构成了'绿色'？" 好吧也许如果我提供十六进制值,库/类可以确定它是绿色,然后生成其他绿色的列表等.这样,在渲染图表之前,我可以说"这个品牌使用了一种颜色使用大量蓝调的方案,随机选择蓝色类型的系列颜色." 那有意义吗？这是在C#或Javascript中会有所帮助.

我宁愿了解如何自己构建一个,但是如果已经存在任何库,那将会有所帮助.

Answer 1

jsBin演示

我能想到的最简单的方法:

使用hsl(色调,饱和度,亮度)颜色.
范围表示如下:

hsl([0-360], [0-100]%, [0-100]%)
      HUE     SATUR.    LIGHT.

把Hue想象成一个360°的轮子,其中0和360是红色的,介于两者之间你还有其他的:

现在你可以从那个轮子中取回12个基本颜色,每步移动30°:

0%  : RED
30% : ORANGE
60% : YELLOW
90% : CHARTREUSE GREEN
120%: GREEN
150%: TURQUOISE
180%: CYAN
210%: AZURE
240%: BLUE
270%: VIOLET
300%: MAGENTA
330%: ROSE

您可以随机或通过(即)20%步长生成一些亮度和饱和度的步骤.

饱和度:将亮度设置为50%并将饱和度设置为0%,您将获得纯灰色(HEX:#808080RGB:rgb(128,128,128) ^{*Wiki:中灰色})的精确等效值,因此将饱和度视为灰色到全彩色单位.

亮度,范围从0%为黑色至100%为白色 - 应用于所选颜色.

(从逻辑上讲,你可以得出结论,亮度也影响饱和度.)

我们把上面的内容放在一起吧!

var numOfShades = 20; // Set here the Desired number of Shades
var colorSELECT = document.getElementById('color');
var colorsDIV = document.getElementById('shades');

function rand(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function createSPAN( hsl ){
  var span = document.createElement('span');
  span.style.backgroundColor = hsl;
  colorsDIV.appendChild(span);
}

function generateShades(){
  colorsDIV.innerHTML = ""; // Empty from old SPANS
  var hue = this.value;     // The Select Value: 0->360

  createSPAN("hsl("+hue+", 100%, 50%)"); // Create The selected color!

  for(var i=0; i<numOfShades; i++){      // Create shades!
    var hsl = "hsl("+hue+", "+ rand(10,90) +"%, "+rand(10, 90) +"%)";
    createSPAN( hsl );
  }
}

colorSELECT.onchange = generateShades;

#shades > span{
  display:inline-block;
  margin:10px;
  width:60px;
  height:60px;
  border-radius:5px;
}

<select id="color">
  <option value="0"> RED</option>
  <option value="30">ORANGE</option>
  <option value="60">YELLOW</option>
  <option value="90">CHARTREUSE GREEN</option>
  <option value="120">GREEN</option>
  <option value="150">TURQUOISE</option>
  <option value="180">CYAN</option>
  <option value="210">AZURE</option>
  <option value="240">BLUE</option>
  <option value="270">VIOLET</option>
  <option value="300">MAGENTA</option>
  <option value="330">ROSE</option>
</select>

<div id="shades"></div>

作为最后的想法,<select>你可以改为使用colorWheel图像(就像我上面提供的那样),跟踪点击坐标并使用一些简单的三角函数来检索相应的程度,而不是使用hsl颜色.