如何获得给定颜色和白色之间的颜色值？答案

【问题标题】：How to get color values between a given color and white?如何获得给定颜色和白色之间的颜色值？
【发布时间】：2017-09-29 14:03:51
【问题描述】：

我需要恢复给定颜色和白色之间的所有值。例如，从这个蓝色 (#4A90E2) 到纯白色 (#ffffff)，并根据一定数量的元素获取值。

如果我有 6 种元素，我需要 6 种颜色，即代表我拥有的 6 种元素的百分比，每一种颜色都比前一种颜色浅一点，就好像你将两种第一种颜色之间的光谱分成六个相等的部分.

有什么想法吗？

谢谢你！

【问题讨论】：

检查这是否有帮助 stackoverflow.com/a/17527156/2968762
颜色只是十六进制数字，所以你可以将它们转换为十进制数字，计算两个数字之间的差，除以X（你会得到你需要添加的差距以获得下一个颜色） .然后你转换回六角得到你的颜色

标签： jquery html css colors percentage

【解决方案1】：

RGB to hex and hex to RGB

在这篇文章中，答案显示了将 RGB 转换为十六进制并返回的函数。使用这些功能，你可以得到不同的结果。

假设我们有#007FFF，如果我们想把它分成两步，首先我们得到数值： R：0，G：127，蓝色：255 现在我们得到了与白色（255）的区别： 255-0 = 0, 255- 127=128, 255-255=0

这些数字现在可以按您想要的步数进行划分。使用 2 个步骤，这将是：127.5, 64, 0

现在可以迭代我们转换为 RGB 的基数，并在每次迭代时添加步长值以实现平滑步长。

function getColorSteps(color,steps) {
   var rgb=hexToRgb(color);
   var deltaRgb = { r: 255-(rgb.r/steps), g: 255-(rgb.g/steps), b:255-(rgb.b/steps) };
   colors = [];
   for (var i = 1; i <= steps; i++) {       
       colors.push({r:rgb.r+deltaRgb.r*i,g:rgb.g+deltaRgb.g*i,b:rgb.b+deltaRgb.b*i});
   }
   return colors;
}

【讨论】：

【解决方案2】：

这个功能很适合你：

function getColors(color, n) {
    // i'm supposing your color is a string in format '#XXXXXX'
    const white = 0xFF;
    const redComponent = parseInt("0x" + color[1] + color[2]);
    const greenComponent = parseInt("0x" + color[3] + color[4]);
    const blueComponent = parseInt("0x" + color[5] + color[6]);

    var colors = [];
    for(var i=1; i<=n; i++) {
        var red = white - (i*(white-redComponent))/(n+1) + 0xf00;
        var green = white - (i*(white-greenComponent))/(n+1) + 0xf00;
        var blue = white - (i*(white-blueComponent))/(n+1) + 0xf00;

        colors.push("#" + red.toString(16).substr(1,2) + green.toString(16).substr(1,2) + blue.toString(16).substr(1,2));
    }
    return colors;            
}

【讨论】：