Как изменить яркость цвета в 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

Вы модифицируете L свойство цвета HSL - это правильно.

Ошибка находится в диапазоне 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);