4

如何将此计算更改为更暗而不是更亮的颜色？

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

4

4 回答 4

6

你可以改变

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

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

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

小于 256。

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

于 2012-11-14T08:31:14.240 回答
3

我更新了您的原始函数，通过基本上将原始 RGB 值乘以一个百分比（向上或向下）来进行廉价版本的变亮/变暗。

function adjust(hexInput: string, percent: number) {
    let hex = hexInput;

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

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

    const calculatedPercent = (100 + percent) / 100;

    r = Math.round(Math.min(255, Math.max(0, r * calculatedPercent)));
    g = Math.round(Math.min(255, Math.max(0, g * calculatedPercent)));
    b = Math.round(Math.min(255, Math.max(0, b * calculatedPercent)));

    return `#${r.toString(16).toUpperCase()}${g.toString(16).toUpperCase()}${b
        .toString(16)
        .toUpperCase()}`;
}

console.log(adjust("#49D174", -14)) // Darken by 14% = #3FB464 
console.log(adjust("#49D174", -27)) // Darken by 27% = #359955

该函数将百分比作为整数，但可以很容易地修改为小数。负变暗，正变亮。

于 2020-03-27T05:53:07.797 回答
0

我从Stylus ( 1 , 2 ) 中汲取了主要思想，并从Stack Overflow 答案中获取了一些代码部分，并生成了一个库darken_color.js。

以下是一些使用示例：

darken('lightgreen', '0.1'); // -> #63e763 
darken('lightgreen', '10'); // -> #63e763
darken('#90EE90', '10'); // -> #63e763
darken('#9e9', '10%'); // ->  #98ed98
于 2013-06-06T09:56:00.723 回答
-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);

在这里，您将和的一些百分比添加到当前值r，这会使颜色变浅。如果您对百分比使用负值，它将从当前值减小并使颜色更深。gb

于 2012-11-14T08:16:52.550 回答