使用本机JavaScript去饱和颜色

Question

我有一个颜色选择器,用户可以指定一个十六进制颜色.

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

有没有办法在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;
}