CSS HSL颜色与javascript

我想使用css创建一个从亮到暗的hsl颜色顺序/调色板，如下所示：

例如，0-10之间的值较亮，10-20之间的值较暗，依此类推

 var toHsla = function (array) {
    return "hsla(" + array[0] + "," + array[1] + "%," + array[2] + "%," + array[3] + ")";
};

var getFrequenceDistribution = function (data, splitCount) {
    var frequence = [];
    var max = Math.max.apply(null, data);
    var min = Math.min.apply(null, data);
    var step = Math.round(max / splitCount);
    var temp = step;
    var rgba = [0, 100, 25, 0.5];

    for (var i = 0; i < splitCount; i++) {
        frequence.push({from: min, to: temp, color: toHsla(rgba)});

        min = temp + 1;
        temp += step;
        rgba[0] = (rgba[0] + (360 / (splitCount * 2)));
        rgba[1] = (rgba[1] - (100 / (splitCount * 2)));
        rgba[2] = (rgba[2] + (100 / (splitCount * 2)));
        rgba[3] = (rgba[3] + (1 / (splitCount*2)));

    }

    return frequence;
};

var toHsla=函数（数组）{
返回“hsla”（“+array[0]+”、“+array[1]+”、“+array[2]+”、“+array[3]+”）；
};
var getFrequenceDistribution=函数（数据、拆分计数）{
var频率=[]；
var max=Math.max.apply（null，数据）；
var min=Math.min.apply（空，数据）；
var步长=数学舍入（最大/分割计数）；
var-temp=阶跃；
var rgba=[0,100,25,0.5]；
对于（变量i=0；i

我不确定如何创建这个，因为这是我第一次体验hsl颜色

---

我已经创建了一个。

你能为此设置一个提琴吗？我用提琴演示更新了帖子。@bookmarker:我有点困惑。这个

数据
数组应该是什么意思？我可以看到您正在基于此计算步骤，但我不明白为什么您需要发送一个数组，然后计算最小值和最大值，而不是将最小值和最大值作为输入传递。有什么原因吗？你的答案可能与答案有关。数据是一组值，如大小、数量等。它可能是100或1000。但它分裂了5个相等的间隔。每个间隔都有一种颜色。例如，1-100是红色的。不是100%，但它可能会帮助您从一个起点开始。我现在没有时间完成这个。基本上，它使用一个rgb到hsl的转换函数（从web上获取），然后根据分割的数量减少颜色的亮度部分。亮度值的降低将导致基础颜色变暗。但是输出仍然与所讨论的图像不匹配，这就是我现在没有时间解决的问题。