Question

我需要恢复给定颜色和白色的所有值。例如，从这个蓝色（＃4A90E2）到纯白色（#ffffff），并获得依赖于一定数量元素的值。

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

有什么想法吗？

先谢谢你了！

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

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

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

2 个答案: