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

来源 = JavaScript Calculate brighter colour

演示 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);

将解决您的问题。 demo .

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

---

关于为什么对原始代码负值不可行的一点解释。

给-100作为百分比，还有一些 channel ，比如r，小于128。然后

r + (256 - r) * percent / 100

小于0，加1 << 8后= 256

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

小于 256。

通过调用 toString(16) 取一个小于 256 的数字将生成最多两个十六进制数字, 所以 .substr(1)将仅包含 0 或 1 个数字。将所有这些错误的数字组合在一起将不会生成十六进制表示形式的正确颜色。