Javascript 计算更明亮的颜色

我在JS中有一个颜色值作为字符串

#ff0000

我如何通过编程计算该颜色的更亮/更亮版本，例如

#ff4848

，并能够通过百分比计算亮度，例如

increase_brightness('#ff0000', 50); // would make it 50% brighter

功能增加亮度（十六进制，百分比）{
//脱掉前面的衣服，如果它在那里的话
十六进制=十六进制。替换（/^\s*||\s*$/g，'）；
//转换3个字符代码-->6，例如`E0F`-->`EE00FF`
如果（十六进制长度==3）{
十六进制=十六进制替换（/（）/g，$1$1'）；
}
var r=parseInt（十六进制substr（0,2,16），
g=parseInt（十六进制substr（2,2,16），
b=parseInt（十六进制substr（4,2,16）；
返回“#”+
（（0 |）（1首先快速了解

然后，将颜色值分解为RGB，进行调整，然后返回新的颜色代码应该很容易

// color is a hex color like #aaaaaa and percent is a float, 1.00=100%
// increasing a color by 50% means a percent value of 1.5
function brighten(color, percent) {
    var r=parseInt(color.substr(1,2),16);
    var g=parseInt(color.substr(3,2),16);
    var b=parseInt(color.substr(5,2),16);

    return '#'+
       Math.min(255,Math.floor(r*percent)).toString(16)+
       Math.min(255,Math.floor(g*percent)).toString(16)+
       Math.min(255,Math.floor(b*percent)).toString(16);
}

实时样本：
更新

@zyklus的答案更简单，效果也一样。只有当您有兴趣在RGB和HSL之间转换时，请参考此答案


要设置RGB的亮度，请执行以下操作：

将RGB转换为HSL

设置HSL的亮度

从HSL转换回RGB

此链接以前有代码将RGB转换为HSL并反转：

您可以将负值作为
percent
参数传递，使其变暗。
这是使用RGB->HSL->RGB方法的increaseBrightness函数。“金额”应以百分比为单位

HSLRGB转换函数取自

功能增加亮度（颜色、数量）{
var r=parseInt（color.substr（1,2,16））；
var g=parseInt（color.substr（3,2,16））；
var b=parseInt（color.substr（5,2,16））；
hsl=rgbToHsl（r，g，b）；
hsl.l+=hsl.l+（金额/100）；
如果（hsl.l>1）hsl.l=1；
rgb=hslToRgb（hsl.h、hsl.s、hsl.l）；
var v=rgb.b |（rgb.g1）t-=1；
如果（t<1/6）返回p+（q-p）*6*t；
如果（t<1/2）返回q；
如果（t<2/3）返回p+（q-p）*（2/3-t）*6；
返回p；
}
var q=l<0.5？l*（1+s）：l+s-l*s；
var p=2*l-q；
r=hue2rgb（p，q，h+1/3）；
g=hue2rgb（p，q，h）；
b=hue2rgb（p，q，h-1/3）；
}
返回{'r'：r*255，'g'：g*255，'b'：b*255}；
}
如果有人需要，我为一个项目将颜色亮度JavaScript代码转换为ASP/VBScript，并想与您分享：

：：颜色亮度（0-100）
“ex.ColorBrightness（#FF0000'，25）”颜色较深
“例如颜色亮度（#FF0000”，50）”中等
“ex.ColorBrightness（#FF0000'，75）”打火机
功能颜色亮度（strRGB、intBrite）
strRGB=替换（strRGB，#，“”）
r=CInt（“&h”和Mid（标准参考文献，1,2））
g=CInt（“&h”和Mid（标准参考文献，3,2））
b=CInt（“&h”和Mid（标准参考文献，5,2））
arrHSL=RGBtoHSL（r，g，b）
dblOrigBrite=CDbl（arrHSL（2）*100）
arrhgb=HSLtoRGB（arrHSL（0）、arrHSL（1）、intBrite/100）
newRGB=“#”&HEXtoDEC（arrRGB（0））&HEXtoDEC（arrRGB（1））&HEXtoDEC（arrRGB（2））
颜色亮度=新RGB
端函数
'：：RGB到HSL功能
函数RGBtoHSL（r、g、b）
r=CDbl（r/255）
g=CDbl（g/255）
b=CDbl（b/255）
最大值=CDbl（最大值（r&“，”g&“，”b））
min=CDbl（MinCalc（r&“，”g&“，”b））
h=CDbl（（最大+最小）/2）
s=CDbl（（最大+最小）/2）
l=CDbl（（最大+最小）/2）
如果最大值=最小值，则
h=0
s=0
其他的
d=最大值-最小值
s=IIf（l>0.5，d/（2-最大值-最小值），d/（最大值+最小值））
选择案例CStr（最大值）
案例CStr（r）
h=（g-b）/d+（IIf（g1，则t=t-1
如果CDbl（t）<（1/6），则
HUEtoRGB=p+（q-p）*6*t
退出功能
如果结束
如果CDbl（t）<（1/2），则
HUEtoRGB=q
退出功能
如果结束
如果CDbl（t）<（2/3），则
休托尔格b=p+（q-p）*（2/3-t）*6
退出功能
如果结束
HUEtoRGB=p
端函数
'：：十六进制到十进制函数
函数HEXtoDEC（d）
h=十六进制（圆形（d，0））
h=右（字符串（2，“0”）和h，2）
六角体=h
端函数
'：：Max函数
函数MaxCalc（值列表）
valList=拆分（valList，“，”）
b=0
对于v=0到uBond（值列表）
a=价值清单（v）
如果CDbl（a）>CDbl（b），则b=a
下一个
MaxCalc=b
端函数
'：：Min函数
函数MinCalc（valList）
valList=拆分（valList，“，”）
对于v=0到uBond（值列表）
a=价值清单（v）
如果b=”“，则b=a
如果CDbl（a）
这样您就不需要对源颜色进行任何转换。

看看这把小提琴：

用法示例：

increase_brightness('#0000ff',20);
increase_brightness('khaki',20);
increase_brightness('rgb(12, 7, 54)',20);

我发现李圣贤回答的一个变体产生了最好的结果

将RGB转换为HSL
设置HSL的亮度
从HSLto RGB转换回
差异/变化是如何增加/减少亮度

newBrightness = HSL[2] + HSL[2] * (percent / 100) // Original code

与其在当前亮度上应用百分比，不如将其视为
function increase_brightness(rgbcode, percent) {
    var r = parseInt(rgbcode.slice(1, 3), 16),
        g = parseInt(rgbcode.slice(3, 5), 16),
        b = parseInt(rgbcode.slice(5, 7), 16),
        HSL = rgbToHsl(r, g, b),
        newBrightness = HSL[2] + HSL[2] * (percent / 100), 
        RGB;

    RGB = hslToRgb(HSL[0], HSL[1], newBrightness);
    rgbcode = '#'
        + convertToTwoDigitHexCodeFromDecimal(RGB[0])
        + convertToTwoDigitHexCodeFromDecimal(RGB[1])
        + convertToTwoDigitHexCodeFromDecimal(RGB[2]);

    return rgbcode;
}

function convertToTwoDigitHexCodeFromDecimal(decimal){
    var code = Math.round(decimal).toString(16);

    (code.length > 1) || (code = '0' + code);
    return code;
}

function increaseBrightness( color, amount ) {
    var r = parseInt(color.substr(1, 2), 16);
    var g = parseInt(color.substr(3, 2), 16);
    var b = parseInt(color.substr(5, 2), 16);
    hsl = rgbToHsl( r, g, b );
    hsl.l += hsl.l + (amount / 100);
    if( hsl.l > 1 ) hsl.l = 1;
    rgb = hslToRgb( hsl.h, hsl.s, hsl.l );

    var v = rgb.b | (rgb.g << 8) | (rgb.r << 16);
    return '#' + v.toString(16);
}

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return {'h':h, 's':s, 'l':l};
}

function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return { 'r':r * 255, 'g':g * 255, 'b':b * 255 };
}

increase_brightness = function(color,percent){

    var ctx = document.createElement('canvas').getContext('2d');

    ctx.fillStyle = color;
    ctx.fillRect(0,0,1,1);

    var color = ctx.getImageData(0,0,1,1);
    var r = color.data[0] + Math.floor( percent / 100 * 255 );
    var g = color.data[1] + Math.floor( percent / 100 * 255 );
    var b = color.data[2] + Math.floor( percent / 100 * 255 );

    return 'rgb('+r+','+g+','+b+')';
}

increase_brightness('#0000ff',20);
increase_brightness('khaki',20);
increase_brightness('rgb(12, 7, 54)',20);

newBrightness = HSL[2] + HSL[2] * (percent / 100) // Original code

newBrightness = HSL[2] + (percent / 100);
newBrightness = Math.max(0, Math.min(1, newBrightness));

// color('#EBEDF0', 30)
color(hex, percent) {
  return '#' + _(hex.replace('#', '')).chunk(2)
    .map(v => parseInt(v.join(''), 16))
    .map(v => ((0 | (1 << 8) + v + (256 - v) * percent / 100).toString(16))
    .substr(1)).join('');
}

function toHslArray(hslCss) {
    let sep = hslCss.indexOf(",") > -1 ? "," : " "
    return hslCss.substr(4).split(")")[0].split(sep)
}

function adjustHslBrightness(color, percent) {
    let hsl = toHslArray(color)
    return "hsl(" + hsl[0] + "," + hsl[1] + ", " + (percent + "%") + ")"
}

let hsl = "hsl(200, 40%, 40%)"
let hsl2 = adjustHslBrightness(hsl, 80)

//hex can be string or number
//rate: 1 keeps the color same. < 1 darken. > 1 lighten.
//to_string: set to true if you want the return value in string
function change_brightness(hex, rate, to_string = false) {
    if (typeof hex === 'string') {
        hex = hex.replace(/^\s*#|\s*$/g, '');
    } else {
        hex = hex.toString(16);
    }
    if (hex.length == 3) {
        hex = hex.replace(/(.)/g, '$1$1');
    } else {
        hex = ("000000" + hex).slice(-6);
    }
    let r = parseInt(hex.substr(0, 2), 16);
    let g = parseInt(hex.substr(2, 2), 16);
    let b = parseInt(hex.substr(4, 2), 16);

    let h, s, v;
    [h, s, v] = rgb2hsv(r, g, b);
    v = parseInt(v * rate);
    [r, g, b] = hsv2rgb(h, s, v);

    hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    if (to_string) return "#" + hex;
    return parseInt(hex, 16);
}

function rgb2hsv(r,g,b) {
    let v = Math.max(r,g,b), n = v-Math.min(r,g,b);
    let h = n && ((v === r) ? (g-b)/n : ((v === g) ? 2+(b-r)/n : 4+(r-g)/n)); 
    return [60*(h<0?h+6:h), v&&n/v, v];
}

function hsv2rgb(h,s,v) {
    let f = (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);
    return [f(5),f(3),f(1)];
}