javascript - 如何在jquery中改变颜色亮度

Question

我创建了一个色板和一个滑块来控制颜色的明暗。我想根据滑块值更改颜色亮度。我尝试了什么：

$("#darklight").slider({
        range: "min",
        value: 0,
        min: -0.5,
        max: 0.5,
        step: 0.1,
        slide: function (event, ui) {
            $("#swatches").children("div").each(function (i, v) {
                var color = $(v).attr("title");
                var rgb = HEXtoRGB(color);
                var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
                hsl[2] += ui.value; //what formula should i use here to change the lightness of color ?
                rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
                color = RGBtoHEX("rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")");
                $(v).attr("title", color).css("backgroundColor", color);
            });
        }
    });

在这里，我将颜色转换为 hsl 并尝试操纵l值，但没有得到正确的公式来操纵。谁能帮帮我？

Answer 1

您正在修改LHSL 颜色的属性 - 这是正确的。

误差在 范围内L。它的标称值应为 0.5，范围为 0 到 1.0。

因此，您要添加的滑块值L应该从-1to运行+1，但您需要将结果值限制在 range0 .. 1中，例如：

hsl[2] += ui.value;
hsl[2] = Math.min(hsl[2], 1);
hsl[2] = Math.max(hsl[2], 0);