将动态十六进制颜色更改链接到html背景样式

Question

我查看了Programmatically Lighten or Darken a hex color (or rgb, and blend colors)，更具体地说：https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)，试图对程序进行类似的颜色更改。

我似乎遇到的问题是，当我将newRGB函数的结果rgb值存储到名为c的变量，并使用c的值在我的Cold函数上实现时，颜色没有发生变化。

我能够存储转换后的RGB数组并在控制台中看到100个rgb值，但是无法使用这100个值来替换我的cold（）函数的颜色值。

目标：当用户在浏览器中增加值时，所有三个输入框的最终背景色应增加红色（增加为全红色，从0到100的中点从黑色开始，为摄氏和减少时则相反。

基本上，从50到100 C，彩色背景色应从全黑开始，然后增长为全红。从50到0 C，彩色背景应从全黑变为全蓝。

注意：我在控制台中计算出的100 rgb值从偏蓝变成了白色。

const celciusInput_input = document.querySelector('#celcius > input');
const farenheitInput_input = document.querySelector('#farenheit > input');
const kelvinInput_input = document.querySelector('#kelvin > input');

function roundNum(num) {
    return Math.round(num * 100) / 100; //round to 100th place (where num is any float number)
}

const pSBC = function (p, from, to) {
    if (typeof (p) != "number" || p < -1 || p > 1 || typeof (from) != "string" || (from[0] != 'r' && from[0] != '#') || (to && typeof (to) != "string")) return null; //ErrorCheck
    if (!this.pSBCr) this.pSBCr = (d) => {
        let l = d.length,
            RGB = {};
        if (l > 9) {
            d = d.split(",");
            if (d.length < 3 || d.length > 4) return null; //ErrorCheck
            RGB[0] = i(d[0].split("(")[1]), RGB[1] = i(d[1]), RGB[2] = i(d[2]), RGB[3] = d[3] ? parseFloat(d[3]) : -1;
        } else {
            if (l == 8 || l == 6 || l < 4) return null; //ErrorCheck
            if (l < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (l > 4 ? d[4] + "" + d[4] : ""); //3 or 4 digit
            d = i(d.slice(1), 16), RGB[0] = d >> 16 & 255, RGB[1] = d >> 8 & 255, RGB[2] = d & 255, RGB[3] = -1;
            if (l == 9 || l == 5) RGB[3] = r((RGB[2] / 255) * 10000) / 10000, RGB[2] = RGB[1], RGB[1] = RGB[0], RGB[0] = d >> 24 & 255;
        }
        return RGB;
    }
    var i = parseInt,
        r = Math.round,
        h = from.length > 9,
        h = typeof (to) == "string" ? to.length > 9 ? true : to == "c" ? !h : false : h,
        b = p < 0,
        p = b ? p * -1 : p,
        to = to && to != "c" ? to : b ? "#000000" : "#FFFFFF",
        f = this.pSBCr(from),
        t = this.pSBCr(to);
    if (!f || !t) return null; //ErrorCheck
    if (h) return "rgb" + (f[3] > -1 || t[3] > -1 ? "a(" : "(") + r((t[0] - f[0]) * p + f[0]) + "," + r((t[1] - f[1]) * p + f[1]) + "," + r((t[2] - f[2]) * p + f[2]) + (f[3] < 0 && t[3] < 0 ? ")" : "," + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 10000) / 10000 : t[3] < 0 ? f[3] : t[3]) + ")");
    else return "#" + (0x100000000 + r((t[0] - f[0]) * p + f[0]) * 0x1000000 + r((t[1] - f[1]) * p + f[1]) * 0x10000 + r((t[2] - f[2]) * p + f[2]) * 0x100 + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 255) : t[3] > -1 ? r(t[3] * 255) : f[3] > -1 ? r(f[3] * 255) : 255)).toString(16).slice(1, f[3] > -1 || t[3] > -1 ? undefined : -2);
}

let color1 = "rgb(153, 175, 255)";

let newRGB = function numChange() {
    const convertedRGB = [];
    for (let i = 0; i < 100; i++) {
        let percentage = i / 100;
        c = pSBC(percentage, color1);
        convertedRGB.push(c);
    }
    return convertedRGB;
}
console.log(newRGB(100));

c = pSBC(newRGB(100), color1); // rgb(20,60,200) + [42% Lighter] => rgb(119,142,223)


function hot() {
    farenheitInput_input.style.background = 'red';
    celciusInput_input.style.background = 'red';
    kelvinInput_input.style.background = 'red';
}

function cold() {
    farenheitInput_input.style.background = '#89e3ff';
    celciusInput_input.style.background = '#89e3ff';
    kelvinInput_input.style.background = '#89e3ff';
}

function defaultColor() {
    farenheitInput_input.style.background = 'black';
    celciusInput_input.style.background = 'black';
    kelvinInput_input.style.background = 'black';
}

function converterCtoFK() {
    const cTemp = parseFloat(celciusInput_input.value);
    const fTemp = (cTemp * (9 / 5) + 32);
    const kTemp = (cTemp + 273.15);
    farenheitInput_input.value = (roundNum(fTemp));
    kelvinInput_input.value = roundNum(kTemp);
    if (cTemp >= 100) {
        hot();
    } else if (cTemp <= 0) {
        cold();
    } else {
        defaultColor();
    }
}


function converterFtoCK() {
    const fTemp = parseFloat(farenheitInput_input.value);
    const cTemp = ((fTemp - 32) * 5 / 9);
    const kTemp = ((fTemp + 459.67) * 5 / 9);
    celciusInput_input.value = roundNum(cTemp);
    kelvinInput_input.value = roundNum(kTemp);
    if (fTemp >= 212) {
        hot();
    } else if (32 > fTemp) {
        cold();
    } else {
        defaultColor();
    }
}

function converterKtoCF() {
    const kTemp = parseFloat(kelvinInput_input.value);
    const cTemp = (kTemp - 273.5);
    const fTemp = (9 / 5 * (kTemp - 273) + 32);
    celciusInput_input.value = roundNum(cTemp);
    farenheitInput_input.value = roundNum(fTemp);
    if (kTemp >= 373.15) {
        hot();
    } else if (273.15 > kTemp) {
        cold();
    } else {
        defaultColor();
    }

}

function main() {
    celciusInput_input.addEventListener('input', converterCtoFK);
    farenheitInput_input.addEventListener('input', converterFtoCK)
    kelvinInput_input.addEventListener('input', converterKtoCF)
}

main();

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: black;
}
div {
    height: 33.3vh;
}

#farenheit {
    border-top: 4px solid white;
    border-bottom: 4px solid white;
}

input[type=number] {
    width: 100%;
    height: 100%;
    background: black;
    outline: none;
    color: white;
    font-size: 10em;
    text-align: center;
    border: 0;
    font-family: avenir, sans-serif;
}

/*browser support for chrome/ safari & opera*/
::-webkit-input-placeholder {
    color: #222222;
}

h1{
color:#ff0000;
}

<!DOCTYPE html>
<html>

<head>
    <title>Temperature Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="wrap">
        <div id="celcius">
            <input type="number" placeholder="celcius...">
        </div>
        <div id="farenheit">
            <input type="number" placeholder="farenheit...">
        </div>
        <div id="kelvin">
            <input type="number" placeholder="kelvin...">
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>