如何使用jQuery更改颜色亮度和饱和度？

Question

我正在尝试创建一个自定义颜色菜单，用户可以通过调整颜色的亮度和饱和度来选择颜色并创建自己的颜色。我的目标是创建类似于CUSTOM COLOR 的东西（仅使用2个滑块亮度和饱和度的颜色调整部分）。

关于我尝试过的内容的描述：我创建了2个jqueryui滑块，一个用于亮度，一个用于饱和度。

$("#lightness").slider({
    range: "min",
    value: 0,
    min: -0.5,
    max: 0.5,
    step: 0.1,
    slide: function (e, ui) {
     $("#existingcolor").children("div").not("#lightdarkslider,#saturations")
      .each(function (i, v) {
          var color = $(v).attr("title");
          var lightcolor = Lighten(color, ui.value);
          $(v).attr("title", lightcolor).css("backgroundColor", lightcolor);
      });
    }
});

$("#saturation_slider").slider({
    range: "min",
    value: 0,
    min: -0.5,
    max: 0.5,
    step: 0.1,
    slide: function (e, ui) {
     $("#existingcolor").children("div").not("#lightdarkslider,#saturations")
       .each(function (i, v) {
        var color = $(v).attr("title");
        var rgb = HEXtoRGB(color);
        var hsv = rgbToHsv(rgb[0], rgb[1], rgb[2]);
        hsv[1] += ui.value * 32;
        rgb = hsvToRgb(hsv[0], hsv[1], hsv[2]);
        color = RGBtoHEX("rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")");
        $(v).attr("title", color).css("backgroundColor", color);
        });
    }
});  

现在，如果用户滑动亮度滑块，则会调用 LIGHTEN 函数。它接受3个参数col（颜色），by和shade。我传递颜色（值：逐个所有现有颜色在pallete中）和（值：jQuery ui滑块当前值）和shade （值：它总是未定义的）。

function Lighten(col, by, shade) {
    if (undefined === by) {
        by = 1;
    } else if (by < 0) {
        Darken(col, -by, shade);
    }
    if (undefined === shade) {
        shade = 32;
    }

    var c = HEXtoRGB(col);

    if ((c[0] += shade * by) > 0xff) c[0] = 0xff;
    if ((c[1] += shade * by) > 0xff) c[1] = 0xff;
    if ((c[2] += shade * by) > 0xff) c[2] = 0xff;

    return RGBtoHEX("rgb(" + c[0] + "," + c[1] + "," + c[2] + ")");
}

如果用户滑动饱和度滑块，首先我们逐个获取调色板中所有现有颜色的HSV值，然后添加当前滑块值 * 32 到饱和度值。

这在一定程度上起作用，但是如果用户连续滑动滑块而不是所有颜色变亮。任何人都可以告诉我我做错了什么，如果还有其他更好或更简单的方法，请告诉我吗？

其他支持功能：

function Darken(col, by, shade) {
    if (undefined === by) {
        by = 1;
    } else if (by < 0) {
        return Lighten(col, -by, shade);
    }
    if (undefined === shade) {
        shade = 32;
    }

    var c = HEXtoRGB(col);

    if ((c[0] -= shade * by) < 0) c[0] = 0;
    if ((c[1] -= shade * by) < 0) c[1] = 0;
    if ((c[2] -= shade * by) < 0) c[2] = 0;

    return RGBtoHEX("rgb(" + c[0] + "," + c[1] + "," + c[2] + ")");
}

function HEXtoRGB(color) {
    document.getElementById("temp1").style.backgroundColor = color;
    color = document.getElementById("temp1").style.backgroundColor;

    var rgb = color.split(",");
    rgb[0] = parseInt(rgb[0].substring(rgb[0].indexOf("(") + 1));
    rgb[1] = parseInt(rgb[1]);
    rgb[2] = parseInt(rgb[2].substring(0, rgb[2].lastIndexOf(")")));

    return rgb;
}

function hsvToRgb(h, s, v) {

    var s = s / 100,
         v = v / 100;

    var hi = Math.floor((h / 60) % 6);
    var f = (h / 60) - hi;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    var rgb = [];

    switch (hi) {
        case 0: rgb = [v, t, p]; break;
        case 1: rgb = [q, v, p]; break;
        case 2: rgb = [p, v, t]; break;
        case 3: rgb = [p, q, v]; break;
        case 4: rgb = [t, p, v]; break;
        case 5: rgb = [v, p, q]; break;
    }

    var r = Math.min(255, Math.round(rgb[0] * 256)),
        g = Math.min(255, Math.round(rgb[1] * 256)),
        b = Math.min(255, Math.round(rgb[2] * 256));

    return [r, g, b];

}

function rgbToHsv(r, g, b) {
     var r = (r / 255),
         g = (g / 255),
     b = (b / 255);

    var min = Math.min(Math.min(r, g), b),
        max = Math.max(Math.max(r, g), b),
        delta = max - min;

    var value = max,
        saturation,
        hue;

    // Hue  
    if (max == min) {
        hue = 0;
    } else if (max == r) {
        hue = (60 * ((g - b) / (max - min))) % 360;
    } else if (max == g) {
        hue = 60 * ((b - r) / (max - min)) + 120;
    } else if (max == b) {
        hue = 60 * ((r - g) / (max - min)) + 240;
    }

    if (hue < 0) {
        hue += 360;
    }

    // Saturation  
    if (max == 0) {
        saturation = 0;
    } else {
        saturation = 1 - (min / max);
    }

    return [Math.round(hue), Math.round(saturation * 100), Math.round(value * 100)];
}

function RGBtoHEX(rgbstring) {
    var str, rgb, hexstring;
    str = rgbstring.substring(rgbstring.indexOf("(") + 1, rgbstring.indexOf(")"));
    rgb = str.split(",");
    if (rgb.length == 4)
        hexstring = rgbToHex(rgb[0], rgb[1], rgb[2], rgb[3]);
    else if (rgb.length == 3)
        hexstring = rgbToHex(rgb[0], rgb[1], rgb[2]);
    return hexstring;
}

function rgbToHex(R, G, B, A) {
    if (typeof A == "undefined")
        return "#" + toHex(R) + toHex(G) + toHex(B);
    else
        return "#" + toHex(R) + toHex(G) + toHex(B) + toHex(A);
}

function toHex(n) {
    n = parseInt(n, 10);
    if (isNaN(n)) return "00";
    n = Math.max(0, Math.min(n, 255));
    return "0123456789ABCDEF".charAt((n - n % 16) / 16)
      + "0123456789ABCDEF".charAt(n % 16);
}

修改

HTML 的

        <div id="newcolorpicker" class="ui-widget-content ui-corner-all">
            <div id="existingcolor" class="ui-widget-content ui-corner-all">
                <span class="ui-widget-content ui-widget">Drag a color onto an element below </span>
                <br />
                <div class="rc ec col" title="#FFFFFF" style="background-color: #FFFFFF;">
                </div>
                <div class="rc ec col" title="#F2F2F2" style="background-color: #F2F2F2;">
                </div>
                <div class="rc ec col" title="#E6E6E6" style="background-color: #E6E6E6;">
                </div>
                <div class="rc ec col" title="#CCCCCC" style="background-color: #CCCCCC;">
                </div>
                <div class="rc ec col" title="#808080" style="background-color: #808080;">
                </div>
                <div class="rc ec col" title="#4D4D4D" style="background-color: #4D4D4D;">
                </div>
                <div class="rc ec col" title="#000000" style="background-color: #000000;">
                </div>
                <div class="rc ec col" title="#C1272D" style="background-color: #C1272D;">
                </div>
                <div class="rc ec col" title="#ED1C24" style="background-color: #ED1C24;">
                </div>
                <div class="rc ec col" title="#F7931E" style="background-color: #F7931E;">
                </div>
                <div class="rc ec col" title="#FFCC33" style="background-color: #FFCC33;">
                </div>
                <div class="rc ec col" title="#FCEE21" style="background-color: #FCEE21;">
                </div>
                <div class="rc ec col" title="#D9E021" style="background-color: #D9E021;">
                </div>
                <div class="rc ec col" title="#8CC63F" style="background-color: #8CC63F;">
                </div>
                <div class="rc ec col" title="#009245" style="background-color: #009245;">
                </div>
                <div class="rc ec col" title="#006837" style="background-color: #006837;">
                </div>
                <div class="rc ec col" title="#00A99D" style="background-color: #00A99D;">
                </div>
                <div class="rc ec col" title="#33CCCC" style="background-color: #33CCCC;">
                </div>
                <div class="rc ec col" title="#33CCFF" style="background-color: #33CCFF;">
                </div>
                <div class="rc ec col" title="#29ABE2" style="background-color: #29ABE2;">
                </div>
                <div class="rc ec col" title="#0071BC" style="background-color: #0071BC;">
                </div>
                <div class="rc ec col" title="#2E3192" style="background-color: #2E3192;">
                </div>
                <div class="rc ec col" title="#662D91" style="background-color: #662D91;">
                </div>
                <div class="rc ec col" title="#93278F" style="background-color: #93278F;">
                </div>
                <div class="rc ec col" title="#D4145A" style="background-color: #D4145A;">
                </div>
                <div class="rc ec col" title="#ED1E79" style="background-color: #ED1E79;">
                </div>
                <div class="rc ec col" title="#C7B299" style="background-color: #C7B299;">
                </div>
                <div class="rc ec col" title="#736357" style="background-color: #736357;">
                </div>
                <div class="rc ec col" title="#C69C6D" style="background-color: #C69C6D;">
                </div>
                <div class="rc ec col" title="#8C6239" style="background-color: #8C6239;">
                </div>
                <div class="rc ec col" title="#603813" style="background-color: #603813;">
                </div>
                <br />
                <div id="lightdarkslider" class="ui-widget">
                    <div class="lightcontol">
                        <label for="lightness" class="csl">
                            Lightness
                        </label>
                        <div id="lightness" class="cssb uislider">
                        </div>
                    </div>
                </div>
                <div id="saturations" class="ui-widget" style="margin-left: 200px; width: 300px;
                    height: 20px">
                    <div class="saturationcontol">
                        <label for="saturation_slider" class="csl" style="padding-left: 35px;">
                            Saturation
                        </label>
                        <div id="saturation_slider" class="cssb uislider" style="margin: 8px 0 0 15px;">
                        </div>
                    </div>
                </div>
            </div>

Answer 1

你可能需要在这篇文章中阅读他们谈论hsla的部分： http://www.jquerysdk.com/api/jQuery.Color

我希望它有所帮助。