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

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

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

因此，要添加到L的滑块值应从-1运行到+1，但您需要将结果值限制在0 .. 1范围内，例如：

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

如何在jquery中改变颜色亮度

1 个答案: