在javascript中使用百分比从两种颜色中获取准确的颜色答案

【问题标题】：Get exact color from two colors with percentage in javascript在javascript中使用百分比从两种颜色中获取准确的颜色
【发布时间】：2021-03-16 04:57:00
【问题描述】：

我在 javascript 中有一个百分比变量和两种颜色。前任。一种颜色是#D7F0FE，另一种颜色是#3DB6FC 百分比变量为 30 (%)

我需要从这三个值中得到准确的颜色。如果百分比为零，则应为#D7F0FE，如果为 100，则应为#3DB6FC。

需要找到最好的方法来做到这一点

【问题讨论】：

标签： javascript css colors

【解决方案1】：

我建议使用 RGB 值，因为该值是用数字定义的。比如

#D7F0FE -> rgb(215, 240, 254)

#3DB6FC -> rgb(61, 182, 252)

现在做一些数学运算，根据百分比动态生成 rgb 值。

请检查以下代码，它会根据输入百分比生成 rgb 值。

<html>
    <head> 
    </head>
    <body id="body">
        <input type="number" id="input-p">
        <button  onclick="changePercentage()">Percentage: </button>
        
        
        <script>
            var body = document.getElementById('body');
            var rgb1 = [215, 240, 254];
            var rgb2 = [61, 182, 252];
            var rgb = [];
            var p = 0;
            var r = (rgb2[0] - rgb1[0])/100;
            var g = (rgb2[1] - rgb1[1])/100;
            var b = (rgb2[2] - rgb1[2])/100;
            var color = 'rgb(215, 240, 254)';
            body.style.background = color;
            function newColor(){
                console.log(p * r);
                rgb = [
                    
                    Math.ceil(rgb1[0] + (p * r)),
                    Math.ceil(rgb1[1] + (p * g)),
                    Math.ceil(rgb1[2] + (p * b))
                ];
                color = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
                body.style.background = color;
            }
            
            function changePercentage(){
                p = document.getElementById('input-p').value;
                newColor();
            }
            
        </script>
        
    </body>
</html>

未优化

【讨论】：