在javascript

Question

我有一种我希望 n 从中缩放的颜色。

最初，我只想要5种颜色：

所以我这样做了：

/* given color */
var level3 = {
    red: 225,
    green: 127,
    blue: 39
}

var level1 = {};
level1.red = parseInt(level3.red / 3);
level1.green = parseInt(level3.green / 3);
level1.blue = parseInt(level3.blue / 3);

var level2 = {};
level2.red = level1.red * 2;
level2.green = level1.green * 2;
level2.blue = level1.blue * 2;

var level4 = {};
level4.red = level3.red + parseInt((255 - level3.red) / 3);
level4.green = level3.green + parseInt((255 - level3.green) / 3);
level4.blue = level3.blue + parseInt((255 - level3.blue) / 3);

var level5 = {};
level5.red = level3.red + parseInt(((255 - level3.red) / 3) * 2);
level5.green = level3.green + parseInt(((255 - level3.green) / 3) * 2);
level5.blue = level3.blue + parseInt(((255 - level3.blue) / 3) * 2);

It works. (Illustration)

问题是如果我需要超过五个级别的给定颜色。

是否可以通过函数获得 n 级别？返回一个RGB数组或类似的东西？

感谢您的时间。

Answer 1

您可以尝试这样的事情：

function colorScale(color, n) {
  var scale = [];
  color = [color.red, color.green, color.blue];
  for(var i=1; i<=n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v * i / n);
    }));
  for(var i=1; i<n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v + (255-v) * i / n);
    }));
  return scale;
}

注意当你想要偶数种颜色时，我不知道它应该如何表现。因此，我只为奇数定义了它，如下所示：如果你想要m种颜色，请使用参数n = (m+1)/2。例如，如果您想要5种颜色，请使用n = 3。

function colorScale(color, n) {
  var scale = [];
  color = [color.red, color.green, color.blue];
  for(var i=1; i<=n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v * i / n);
    }));
  for(var i=1; i<n; ++i)
    scale.push(color.map(function(v) {
      return Math.round(v + (255-v) * i / n);
    }));
  return scale;
}
var wrapper = document.getElementById('scale');
function paint() {
  wrapper.innerHTML = '';
  colorScale({
    red: +document.getElementById('red').value,
    green: +document.getElementById('green').value,
    blue: +document.getElementById('blue').value
  }, +document.getElementById('n').value
            )
  .forEach(function(color) {
    var el = document.createElement('div');
    el.style.backgroundColor = 'rgb(' + color + ')';
    wrapper.appendChild(el);
  });
}
paint();
document.addEventListener('change', paint);

label {
  display: block;
}
#scale > div {
  padding: 10px;
  border: 1px solid #000;
  float: left;
}

<label>n = <input id="n" value="3" /></label>
<label>red = <input id="red" value="225" /></label>
<label>green = <input id="green" value="127" /></label>
<label>blue = <input id="blue" value="39" /></label>
<div id="scale"></div>