Цвет сини на серый CSS рассчитать в JavaScript

Question

Как рассчитать цвет div bg от синего до светло-синего до серого на основе процентного значения?ех.если значение равно 100%, цвет bg div равен #0000FF;если значение равно 50%, это светло-синий;если значение равно 0, цвет bg серый.

Есть ли алгоритм работы над этим?

Спасибо за любую помощь.

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

Вот демонстрационная версия.

Answer 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];