Question

我有一个颜色选择器，用户可以在其中指定十六进制颜色。

我还想要一个饱和度滑块，用户可以调整饱和度，并将新的十六进制颜色作为输出。

有没有办法在JavaScript中将饱和度值和十六进制颜色转换为新的十六进制颜色？

所以，举例来说，我的值为＃FF0000，饱和度为50（满分为100），我如何从中确定新的十六进制颜色？

我无法使用任何库，因为我将其创建为我网站的插件，并且我试图尽可能地保持它。

Answer 1

$("#color, #saturation").change(function(){
    updateColor();
});

function updateColor(){
    var col = hexToRgb($("#color").val());
    var sat = Number($('#saturation').val())/100;
    var gray = col.r * 0.3086 + col.g * 0.6094 + col.b * 0.0820;

    col.r = Math.round(col.r * sat + gray * (1-sat));
    col.g = Math.round(col.g * sat + gray * (1-sat));
    col.b = Math.round(col.b * sat + gray * (1-sat));

    var out = rgbToHex(col.r,col.g,col.b);

    $('#output').val(out);

    $('body').css("background",out);
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

Answer 2

function applySat(sat, hex) {
    var hash = hex.substring(0, 1) === "#";

    hex = (hash ? hex.substring(1) : hex).split("");

    var long = hex.length > 3,
        rgb = [],
        i = 0,
        len = 3;

    rgb.push( hex.shift() + (long ? hex.shift() : "") );
    rgb.push( hex.shift() + (long ? hex.shift() : "") );
    rgb.push( hex.shift() + (long ? hex.shift() : "") );

    for( ; i < len; i++ ) {
        if ( !long ) {
            rgb[i] += rgb[i];
        }

        rgb[i] = Math.round( parseInt(rgb[i], 16)/100*sat).toString(16);

      rgb[i] += rgb[i].length === 1 ? rgb[i] : "";
    }

    return (hash ? "#" : "") + rgb.join("");
}

console.log(applySat(50, "#ff0000")); // "#7f0000";
console.log(applySat(50, "ff0000")); // "7f0000";
console.log(applySat(50, "#fed")); // "#7f776f"
console.log(applySat(50, "fed")); // "7f776f"
console.log(applySat(20, "#addfaa")); // "#232d22"

Answer 3

如果您确实不想使用图书馆，请参阅 mjijackson's RGB to HSL conversion page 。

复制代码以进行RGB十六进制到HSL（或HSV）转换。移动滑块时，您需要使用它们在颜色模型之间进行转换以获得饱和度值，对其进行修改，然后再获得生成的rgb颜色。

注意：HSL and HSV是标准颜色模型。其他一些答案提出了与这些标准颜色模型不对应的“饱和度”的定义。用户会感到困惑，因为替代定义不会使结果与他们对GIMP，Photoshop或其他常见图形应用程序的期望保持一致。

Answer 4

您可以使用this solution中提供的Javascript来满足您的需求

要更改元素的饱和度，请同时移动三个HEX值中的每一个，使值更接近128（256的一半）。

background-color: #FF0000; // rgb(255, 0, 0)

到此......

background-color: #BF4040; // rgb(191, 64, 64)

Answer 5

真正简单易用的功能，输入您的颜色，并添加您想要去饱和的程度。它做得很好，但不完全准确。

    function addSaturation(color, amount){
        var color = color.replace('#', '').split('');
        var letters = '0123456789ABCDEF'.split('');
        for(var i = 0; i < color.length; i++){
            var newSaturation = 0;
            if(letters.indexOf(color[i]) + amount > 15) newSaturation = 15;
            else if(letters.indexOf(color[i]) + amount < 0) newSaturation = 0;
            else newSaturation = letters.indexOf(color[i]) + amount;
            color[i] = letters[newSaturation];
        }
        return "#" + color.join('');
    }

你也可以使用正数或负数。

使用本机JavaScript去饱和颜色

5 个答案: