javascript - 使用 native JavaScript 对颜色进行去饱和处理

Question

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

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

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

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

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

Answer 1

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;
}