5

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

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

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

因此，例如，我有一个值 #FF0000 和 50 的饱和度（满分 100），我将如何从中确定新的十六进制颜色？

我不能为它使用任何库，因为我将它创建为我网站的插件，并且我试图让它尽可能轻。

4

5 回答 5

8

http://jsfiddle.net/5sfDQ/

$("#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;
}
于 2012-11-12T17:29:03.170 回答
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"
于 2012-11-12T17:37:23.993 回答
1

如果您真的不想使用库，请参阅mjijackson 的 RGB 到 HSL 转换页面。

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

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

于 2012-11-13T03:38:01.153 回答
1

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

    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('');
    }

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

于 2014-10-06T20:50:16.783 回答
0

您可以利用此解决方案中提供的 Javascript来满足您的需求

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

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

对这个...

background-color: #BF4040; // rgb(191, 64, 64)
于 2012-11-12T17:17:20.250 回答