在Javascript中获取一个颜色的n个（RGB）比例

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);

它起作用了。(插图)

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

有没有可能用一个函数获得 n 个级别呢？返回RGB数组或类似的东西?

感谢您的时间。

- user4227915

---

考虑将RGB转换为HSB。然后只需要改变B（亮度）的大小即可。 - Jongware

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>

- Oriol

---

老兄！你太棒了！ - user4227915