Javascript计算深色

Question

如何将这种计算方式更改为较暗而不是较亮的颜色？

function increase_brightness(hex, percent){
    // strip the leading # if it's there
    hex = hex.replace(/^\s*#|\s*$/g, '');

    // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
    if(hex.length == 3){
        hex = hex.replace(/(.)/g, '$1$1');
    }

    var r = parseInt(hex.substr(0, 2), 16),
        g = parseInt(hex.substr(2, 2), 16),
        b = parseInt(hex.substr(4, 2), 16);

    return '#' +
       ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) +
       ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) +
       ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);
}

src = JavaScript计算较亮的颜色

演示 http://jsbin.com/utavax/3/edit

Answer 1

你可以改变

return '#' +
   ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) +
   ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) +
   ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);

至

return '#' +
   ((0|(1<<8) + r * (1 - percent / 100)).toString(16)).substr(1) +
   ((0|(1<<8) + g * (1 - percent / 100)).toString(16)).substr(1) +
   ((0|(1<<8) + b * (1 - percent / 100).toString(16)).substr(1);

将解决您的问题。演示。

但是较深的颜色不是一个好的定义。较暗可以解释为亮度较小或饱和度较小。因此，更好的方法是将RGB颜色空间转换为HSB颜色空间，并调整S / B通道，然后再将它们转换回去。

关于为什么原始代码的负值不正确的一些解释。

给出-100的百分比，然后某个通道（例如r）小于128。

r + (256 - r) * percent / 100

在加1 << 8= 256 之后小于0

((0|(1<<8) + r + (256 - r) * percent / 100)

小于256。

小于256的数字将通过调用最多生成两个十六进制数字toString(16)，因此.substr(1)仅包含0或1个数字。通过将所有这些错误的数字组合在一起，将无法在十六进制表示中生成适当的颜色。