使用javascript的CSS HSL颜色

Question

我想使用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;
};

我不确定如何制作这个，因为这是我的第一次色彩体验。

我创建了一个DEMO。