How to change color lightness in jquery

Question

I have created a color swatches and a slider for controlling the darkness & lightness of color. I want to change the color lightness according to the slider value. What i tried :

$("#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);
            });
        }
    });

Here i am converting color to hsl and trying to manipulate the l value, but not getting the correct formula to manipulate. Can anyone please help me out ?

Answer 1

You are modifying the L property of an HSL colour - that's correct.

The error is in the range of L. It should have a nominal value of 0.5, with a range of 0 to 1.0.

Hence your slider value to be added to L should run from -1 to +1, but you need to clamp the resulting value in the range 0 .. 1, e.g:

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