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 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通道，然后将其转换回来。

对原始代码的负值原因不明确的一点解释。

将-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位数。通过将所有这些错误的数字组合在一起将不会以十六进制表示生成正确的颜色。

Answer 2

我通过将原始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

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

Answer 3

我从Stylus（1，2）和Stack Overflow answers的一些代码部分中获取了主要想法，并生成了一个库，darken_color.js

以下是一些使用示例：

darken('lightgreen', '0.1'); // -> #63e763 
darken('lightgreen', '10'); // -> #63e763
darken('#90EE90', '10'); // -> #63e763
darken('#9e9', '10%'); // ->  #98ed98

Answer 4

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，g和b的一定百分比添加到当前值，使颜色变浅。如果您使用百分比的负值，它将从当前值减少并使颜色更暗。

Javascript计算较暗的颜色

4 个答案: