在javascript中计算蓝色到灰色的CSS颜色答案

【问题标题】：Blue to Gray CSS color calculate in javascript在javascript中计算蓝色到灰色的CSS颜色
【发布时间】：2012-03-30 03:28:04
【问题描述】：

如何根据百分比值计算从蓝色到浅蓝色到灰色的 div bg 颜色？前任。如果该值等于 100%，则 div 的背景颜色为#0000FF；如果该值等于 50%，则为浅蓝色；如果值为0，则背景颜色为灰色。

有算法可以解决这个问题吗？

感谢您的帮助。

【问题讨论】：

您可以查看这个问题，它使用数学来确定两种 RGB 颜色混合在一起的正确颜色以及加权因子：stackoverflow.com/a/1892036/420001

标签： javascript css colors graph-algorithm

【解决方案1】：

首先，您需要 RGB 中的十六进制值。为此，您可以使用此功能：

function hexToRgb(hex) {
    return {
        r: parseInt(hex.substring(1, 3), 16),
        g: parseInt(hex.substring(3, 5), 16),
        b: parseInt(hex.substring(5, 7), 16)
    };
}

然后，只需将权重应用于每个组件：

function blendColors(colorA, colorB, weight) {
    return {
        r: Math.floor(colorA.r * (1 - weight) + colorB.r * weight),
        g: Math.floor(colorA.g * (1 - weight) + colorB.g * weight),
        b: Math.floor(colorA.b * (1 - weight) + colorB.b * weight)
    };
}

Here's a demo.

【讨论】：

【解决方案2】：

你可以制作一个json对象，在改变颜色的同时直接引用它

var colorMap = new Object();
colorMap["100%"] = "#0000FF";
colorMap["50%"] = "lightBlue";
colorMap["0%"] = "gray";

然后在您更改背景颜色时使用此地图

var percentageValue = '100%'; //you can pass this value inside a function also
document.getElementById("obj").style.background-color=colorMap[percentageValue];

【讨论】：