Javascript 如何计算三者之间的比例颜色以百分比给出？

我有用户介绍的三种十六进制颜色，例如：

#39bf26
#c7c228
#C7282E

然后他们必须选择1到100之间的百分比

• 如果百分比aje为100，则返回的颜色为 插入的第一种颜色：#39bf26
• 如果百分比为50，则返回的颜色将为 插入第二种颜色：#c7c228
• 如果百分比aje为1，则返回的颜色将为 插入第三种颜色：#C7282E
• 最后，如果百分比介于之前的任何值之间， 然后返回的颜色将是前两种颜色的比例混合 百分比Aje<50时的颜色，以及最后两种颜色的混合（如果 百分比>50

我在这里发现了一个类似的算法：

但我恐怕没有色彩算法方面的经验，所以我希望你能给我一些建议或指导

---

如果您需要更多信息，请告诉我，我将编辑此帖子。

好的，以下是解决方案：

function getColorForPercentage(pct) {
    pct /= 100;

    var percentColors = [
            { pct: 0.01, color: { r: 0xdd, g: 0x51, b: 0x4c } },
            { pct: 0.5, color: { r: 0xfa, g: 0xa7, b: 0x32 } },
            { pct: 1.0, color: { r: 0x5e, g: 0xb9, b: 0x5e }} ];

    for (var i = 0; i < percentColors.length; i++) {
        if (pct <= percentColors[i].pct) {
            var lower = percentColors[i - 1] || { pct: 0.1, color: { r: 0x0, g: 0x00, b: 0 } };
            var upper = percentColors[i];
            var range = upper.pct - lower.pct;
            var rangePct = (pct - lower.pct) / range;
            var pctLower = 1 - rangePct;
            var pctUpper = rangePct;
            var color = {
                r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
                g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
                b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
            };
            return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
        }
    }
}

函数getColorForPercentage（pct）{ pct/=100； 变量百分比颜色=[ {pct:0.01，颜色：{r:0xdd，g:0x51，b:0x4c}， {pct:0.5，颜色：{r:0xfa，g:0xa7，b:0x32}， {pct:1.0，颜色：{r:0x5e，g:0xb9，b:0x5e}}]； 对于（变量i=0；i如果（pct不必要的过度杀戮-引入一个

color

对象进行分析，

.scale

和

.add

hex colors

var Colour = (function () {
    function limit(x) {
        if (x > 255) return 255;
        if (x < 0) return 0;
        return Math.floor(x);
    }
    function toHex(r, g, b) {
        if (r > 15) r = r.toString(16);
        else r = '0' + r.toString(16);
        if (g > 15) g = g.toString(16);
        else g = '0' + g.toString(16);
        if (b > 15) b = b.toString(16);
        else b = '0' + b.toString(16);
        return '#' + (r + g + b).toUpperCase();
    }
    function Colour(hex) {
        if (hex.length === 7 || hex.length === 4) hex = hex.slice(1);
        if (hex.length === 3)
            hex = hex.charAt(0) + hex.charAt(0)
                + hex.charAt(1) + hex.charAt(1)
                + hex.charAt(2) + hex.charAt(2);
        this.hex = '#' + hex.toUpperCase();
        this.r = parseInt(hex.slice(0, 2), 16);
        this.g = parseInt(hex.slice(2, 4), 16);
        this.b = parseInt(hex.slice(4, 6), 16);
    }
    Colour.prototype.scale = function (x) {
        this.r = limit(this.r * x);
        this.g = limit(this.g * x);
        this.b = limit(this.b * x);
        this.hex = toHex(this.r, this.g, this.b);
        return this;
    };
    Colour.prototype.add = function (c) {
        return new Colour(
            toHex(
                limit(this.r + c.r),
                limit(this.g + c.g),
                limit(this.b + c.b)
            )
        );
    };
    Colour.prototype.toString = function () {
        return this.hex;
    };
    Colour.prototype.valueOf = Colour.prototype.toString;
    return Colour;
}());

现在为百分比逻辑编写一个函数

function percent(x, col) {
    var factor;
    if (x < 50) {
        factor = (50 - x) / 50;
        return col[0].scale(factor).add(col[1].scale(1-factor));
    } else {
        factor = (100 - x) / 50;
        return col[2].scale(factor).add(col[1].scale(1-factor));
    }
}

---

不幸的是（除非你想引入新的属性），这将受到小的舍入误差的影响，如75%的结果所示（C6不是红色的C7，因为C7=199199，199/2=99.5=>99，然后99+99=198=>C6）。

你只需要知道#39bf26是（0x39,0xbf，0x26），每个通道以十六进制表示；您只需逐个通道进行加权平均。这是问题所在？是的，我没有意识到…我将我的解决方案放在下面的响应中。我喜欢

返回'rgb（+[color.r，color.g，color.b]。join（'，'））+'；

第19行赋值的左侧无效：“hex=hex.charAt（0）+hex=hex.charAt（0）”@actimel很惊讶这件事在被注意到之前就发生了，修正了

function percent(x, col) {
    var factor;
    if (x < 50) {
        factor = (50 - x) / 50;
        return col[0].scale(factor).add(col[1].scale(1-factor));
    } else {
        factor = (100 - x) / 50;
        return col[2].scale(factor).add(col[1].scale(1-factor));
    }
}

percent(25, myColours); // Colour {hex: "#7FC027", r: 127, g: 192, b: 39, …}
percent(75, myColours); // Colour {hex: "#C6752B", r: 198, g: 117, b: 43, …}