Javascript 如何生成颜色（不是偶然的），使它们具有不同的颜色，而不是阴影？

是否有可能“添加”另一种颜色，并从本质上让它从停止的地方恢复？例如，假设您以30个项目开始上色，但用户添加了31个项目。有没有一种方法可以让它继续使用当前生成的集，并简单地生成一种符合先前色调和步骤的颜色？ 我找到了一个例子，但我不明白如何使用它

函数彩虹（numOfSteps，step）{
//此功能可生成生动活泼的“均匀分布”颜色（即无聚类）。这是在谷歌地图和其他应用程序中创建易于识别的生动活泼标记的理想选择。
//亚当·科尔，2011年9月14日
//HSV至RBG改编自：http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
var r，g，b；
var h=步数/步数；
变量i=~（h*6）；
var f=h*6-i；
var q=1-f；
交换机（i%6）{
案例0：r=1；g=f；b=0；断裂；
案例1：r=q；g=1；b=0；断裂；
案例2：r=0；g=1；b=f；断裂；
案例3：r=0；g=q；b=1；断裂；
案例4：r=f；g=0；b=1；断裂；
案例5：r=1；g=0；b=q；断裂；
}
变量c=“#”+（[00”+（~（r*255））.toString（16））.slice（-2）+（[00”+（~（g*255））.toString（16））.slice（-2）+（[00”+（~（b*255））.toString（16））.slice（-2）；
返回（c）；
}

如果您想保持色调，则更容易从HSV/HSL开始，然后转换为RGB：

函数GenerateHslaColor（饱和度、亮度、alpha、数量）{
让颜色=[]
设huedelta=Math.trunc（360/金额）
for（设i=0；i

/**
*将HSL颜色值转换为RGB。换算公式
*改编自http://en.wikipedia.org/wiki/HSL_color_space.
*假设h、s和l包含在集合[0、1]中，并且
*返回集合[0255]中的r、g和b。
*
*@param{number}h色调
*@param{number}是饱和度
*@param{number}l明度
*@return{Array}RGB表示法
*/
函数hslToRgb（h、s、l）{
var r，g，b；
如果（s==0）{
r=g=b=l；//消色差
}否则{
var hue2rgb=函数hue2rgb（p，q，t）{
如果（t<0）t+=1；
如果（t>1）t-=1；
如果（t<1/6）返回p+（q-p）*6*t；
如果（t<1/2）返回q；
如果（t<2/3）返回p+（q-p）*（2/3-t）*6；
返回p；
}
var q=l<0.5？l*（1+s）：l+s-l*s；
var p=2*l-q；
r=hue2rgb（p，q，h+1/3）；
g=hue2rgb（p，q，h）；
b=hue2rgb（p，q，h-1/3）；
}
return[Math.round（r*255）、Math.round（g*255）、Math.round（b*255）]；
}

我找到了一个例子，但我不明白如何使用它

您需要决定要将渐变分割成多少个不同的分段。然后，您需要循环该

total

，并生成梯度的每一段，如下所示：

函数彩虹（numOfSteps，step）{
//此功能可生成生动活泼的“均匀分布”颜色（即无聚类）。这是在谷歌地图和其他应用程序中创建易于识别的生动活泼标记的理想选择。
//亚当·科尔，2011年9月14日
//HSV至RBG改编自：http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
var r，g，b；
var h=步数/步数；
变量i=~（h*6）；
var f=h*6-i；
var q=1-f；
交换机（i%6）{
案例0：r=1；g=f；b=0；断裂；
案例1：r=q；g=1；b=0；断裂；
案例2：r=0；g=1；b=f；断裂；
案例3：r=0；g=q；b=1；断裂；
案例4：r=f；g=0；b=1；断裂；
案例5：r=1；g=0；b=q；断裂；
}
变量c=“#”+（[00”+（~（r*255））.toString（16））.slice（-2）+（[00”+（~（g*255））.toString（16））.slice（-2）+（[00”+（~（b*255））.toString（16））.slice（-2）；
返回（c）；
}
常数总数=100；
for（设i=0；i

.box{
位置：相对位置；
宽度：100%；
高度：10px；
}

要让32种颜色看起来真正独一无二并不容易。特别是如果你只想改变色调，你可以看到这里有32种颜色只改变色调

consthsl=（h，s，l）=>hsl（${h*360 | 0}，${s*100}%，${l*100}%）`；
for（设i=0；i<32；++i）{
const div=document.createElement（'div'）；
div.style.background=hsl（i/32,1,0.5）；
div.className='b'；
文件.正文.附件（div）；
}

.b{
宽度：32px；
高度：32px；
显示：内联块；
}

请避免投递。这应该是一个评论，或者你需要在问题中包含这些链接的基本部分。绿色阴影无法区分，尽管。@D.Pardal OP问他应该如何使用他找到的代码。我没有写算法。如果OP:s的问题与算法的结果有关，那么这应该在问题中表达出来。Olian04谢谢）我如何在java中实现这一点我在Math.floor上更改了这个，但它对我不起作用(

    function generateHslaColors (saturation, lightness, alpha, amount) {
      let colors = []
      let huedelta = Math.trunc(360 / amount)

      for (let i = 0; i < amount; i++) {
        let hue = i * huedelta
        colors.push(`hsla(${hue},${saturation}%,${lightness}%,${alpha})`)
      }

      return colors
    }

    /**
     * Converts an HSL color value to RGB. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes h, s, and l are contained in the set [0, 1] and
     * returns r, g, and b in the set [0, 255].
     *
     * @param   {number}  h       The hue
     * @param   {number}  s       The saturation
     * @param   {number}  l       The lightness
     * @return  {Array}           The RGB representation
     */
    function hslToRgb(h, s, l){
        var r, g, b;

        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            var hue2rgb = function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }