在四级渐变的特定百分比处查找 RGB 颜色值答案

【问题标题】：Find the RGB colour value at a specific percentage of a four stop gradient在四级渐变的特定百分比处查找 RGB 颜色值
【发布时间】：2017-01-13 01:34:15
【问题描述】：

问题： 我有一个四级渐变，颜色值为 0%、33%、66% 和 100%。我想用百分比找出这个渐变中任何一点的颜色值。

我认为我需要某种多级色调插值，但想知道是否有一种简单的 JavaScript 方法可以做到这一点，然后我才开始尝试自己编写。

我正在使用的色标：

 //0%
  var stop1 = { r: 25, g: 47, b: 97 };

  //33%
  var stop2 = { r: 75, g: 183, b: 183 };

  //66%
  var stop3 = { r: 237, g: 120, b: 87 };

  //100%
  var stop4 = { r: 209, g: 74, b: 88 };

【问题讨论】：

你有没有尝试过？如果是这样，请您展示您的尝试。谢谢。

标签： javascript colors rgb

【解决方案1】：

我还发现了这个漂亮的小图书馆，可以玩弄颜色：chroma.js

【讨论】：

【解决方案2】：

您可以使用步骤间隔的增量并以正确的比例计算颜色。

它是如何工作的。

例如，我们正在寻找 70 % 的颜色，首先，我们得到间隔
[66, 100]
然后建立比率
百分比的增量和左区间 (left)
  70 - 66 => 4
正确区间的增量和百分比 (right)
  100 - 70 => 30
左右区间的delta (delta)
  100 - 66 => 34
通过上面生成的比率，可以计算出两种颜色之间的正确颜色。
  (color of left interval * right + color of right interval * left) / delta => color
对所有颜色重复上一步并返回结果。

工作示例：

*表示给定颜色，悬停显示百分比值和RGB值。

function getColor(percent) {
    function getInterval(range) {
        function getRatio(color) {
            return Math.floor((colors[range[0]][color] * right + colors[range[1]][color] * left) / delta);
        }

        var left = percent - range[0],
            right = range[1] - percent,
            delta = range[1] - range[0];

        return { r: getRatio('r'), g: getRatio('g'), b: getRatio('b') };
    }

    return colors[percent] || getInterval(stops.reduce(function (r, a, i, aa) {
        return a < percent ? [a, aa[i + 1]] : r;
    }, [0, 0]));
}

var stops = [0, 33, 66, 100],
    colors = { 0: { r: 25, g: 47, b: 97 }, 33: { r: 75, g: 183, b: 183 },  66: { r: 237, g: 120, b: 87 }, 100: { r: 209, g: 74, b: 88 } },
    i, color, rgb;

for (i = 0; i <= 100; i++) {
    color = getColor(i),
    rgb =  ['r', 'g', 'b'].map(function (k) { return color[k]; });
    document.body.innerHTML += '<span style="color: #fff; background-color: rgb(' + rgb + ');" title="' + (colors[i] ? '* ' : '') + i + ' % rgb(' + rgb.join(', ') + ')">' + (colors[i] ? '*&nbsp;' : '&nbsp;&nbsp;') + '</span>';
}

【讨论】：