JavaScript计算更明亮的颜色

时间：2011-06-22 17:26:28

标签： javascript colors increment brightness

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

#ff0000

我如何以编程方式计算此颜色的更亮/更亮的版本，例如#ff4848，并能够通过百分比计算亮度，例如

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

12 个答案:

答案 0 :(得分：69)

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

/**
 * ('#000000', 50) --> #808080
 * ('#EEEEEE', 25) --> #F2F2F2
 * ('EEE     , 25) --> #F2F2F2
 **/

答案 1 :(得分：17)

<强>更新

@ zyklus的答案更简单，效果也一样。仅当您对RGB和HSL之间的转换感兴趣时，请参阅此答案。

设置RGB的亮度：

  1. 将RGB转换为HSL

  2. 设置HSL的亮度

  3. 从HSL转换回RGB

    4. 此链接用于将RGB转换为HSL并反转的代码： http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript 

    /**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation
 */
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, s, l];
}

/**
 * Converts an HSL color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes h, s, and l are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  l       The lightness
 * @return  Array           The RGB representation
 */
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 * 255, g * 255, b * 255];
}

    我用它做了一些例子。请检查此链接：http://jsfiddle.net/sangdol/euSLy/4/

    这是increase_brightness()函数：

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

    您可以将负值作为percent参数传递，以使其变暗。

答案 2 :(得分：4)

如果有人需要，我将颜色亮度JavaScript代码转换为项目的ASP / VBScript，并认为我会与你分享：

'::Color Brightness (0-100)
'ex.     ColorBrightness("#FF0000",25)  'Darker
'ex.     ColorBrightness("#FF0000",50)  'Mid
'ex.     ColorBrightness("#FF0000",75)  'Lighter
Function ColorBrightness(strRGB,intBrite)
    strRGB = Replace(strRGB,"#","")

    r = CInt("&h" & Mid(strRGB,1,2))
    g = CInt("&h" & Mid(strRGB,3,2))
    b = CInt("&h" & Mid(strRGB,5,2))

    arrHSL = RGBtoHSL(r, g, b)
    dblOrigBrite = CDbl(arrHSL(2) * 100)

    arrRGB = HSLtoRGB(arrHSL(0), arrHSL(1), intBrite/100)
    newRGB = "#" & HEXtoDEC(arrRGB(0)) & HEXtoDEC(arrRGB(1)) & HEXtoDEC(arrRGB(2))

    ColorBrightness = newRGB
End Function


'::RGB to HSL Function
Function RGBtoHSL(r,g,b)
    r = CDbl(r/255)
    g = CDbl(g/255)
    b = CDbl(b/255)

    max = CDbl(MaxCalc(r & "," & g & "," & b))
    min = CDbl(MinCalc(r & "," & g & "," & b))

    h = CDbl((max + min) / 2)
    s = CDbl((max + min) / 2)
    l = CDbl((max + min) / 2)

    If max = min Then
        h = 0
        s = 0
    Else
        d = max - min
        s = IIf(l > 0.5, d / (2 - max - min), d / (max + min))
        Select Case CStr(max)
            Case CStr(r)
                h = (g - b) / d + (IIf(g < b, 6, 0))
            Case CStr(g)
                h = (b - r) / d + 2
            Case CStr(b)
                h = (r - g) / d + 4
        End Select
        h = h / 6
    End If

    RGBtoHSL = Split(h & "," & s & "," & l, ",")
End Function


'::HSL to RGB Function
Function HSLtoRGB(h,s,l)
    If s = 0 Then
        r = l
        g = l
        b = l
    Else
        q = IIf(l < 0.5, l * (1 + s), l + s - l * s)
        p = 2 * l - q
        r = HUEtoRGB(p, q, h + 1/3)
        g = HUEtoRGB(p, q, h)
        b = HUEtoRGB(p, q, h - 1/3)
    End If

    HSLtoRGB = Split(r * 255 & "," & g * 255 & "," & b * 255, ",")
End Function


'::Hue to RGB Function
Function HUEtoRGB(p,q,t)
    If CDbl(t) < 0 Then t = t + 1
    If CDbl(t) > 1 Then t = t - 1

    If CDbl(t) < (1/6) Then
        HUEtoRGB = p + (q - p) * 6 * t
        Exit Function
    End If

    If CDbl(t) < (1/2) Then
        HUEtoRGB = q
        Exit Function
    End If

    If CDbl(t) < (2/3) Then
        HUEtoRGB = p + (q - p) * (2/3 - t) * 6
        Exit Function
    End If

    HUEtoRGB = p
End Function


'::Hex to Decimal Function
Function HEXtoDEC(d)
    h = Hex(Round(d,0))
    h = Right(String(2,"0") & h,2)
    HEXtoDEC = h
End Function


'::Max Function
Function MaxCalc(valList)
    valList = Split(valList,",")
    b = 0
    For v = 0 To UBound(valList)
        a = valList(v)
        If CDbl(a) > CDbl(b) Then b = a
    Next
    MaxCalc = b
End Function


'::Min Function
Function MinCalc(valList)
    valList = Split(valList,",")
    For v = 0 To UBound(valList)
        a = valList(v)
        If b = "" Then b = a
        If CDbl(a) < CDbl(b) AND b <> "" Then b = a
    Next
    MinCalc = b
End Function


'::IIf Emulation Function
Function IIf(condition,conTrue,conFalse)
    If (condition) Then
        IIf = conTrue
    Else
        IIf = conFalse
    End If
End Function

答案 3 :(得分：1)

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

实时样本：http://jsfiddle.net/emM55/

答案 4 :(得分：1)

这是使用RGB-＆gt; HSL-＆gt; RGB方法的increaseBrightness函数。 “金额”应为百分比。

HSL＆lt; - ＆gt; RGB转换函数取自http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript 

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

答案 5 :(得分：1)

我知道这是一个老问题，但是我没有找到简单地处理CSS HSL颜色的答案。我发现这里的旧答案过于复杂和缓慢，甚至产生的效果也不佳，因此似乎有必要采用另一种方法。以下替代方案性能更高，复杂性更低。

当然，此答案要求您在整个应用中使用hsl颜色，否则，您仍然必须进行大量转换！但是，如果您需要在游戏循环中操作亮度，则无论如何都应使用hsl值，因为它们更适合编程操作。据我所知，rgb的hsl唯一的缺点是，很难像使用rgb字符串一样“读取”您所看到的色调。

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)

答案 6 :(得分：1)

function brighten(color, c) {
  const calc = (sub1,sub2)=> Math.min(255,Math.floor(parseInt(color.substr(sub1,sub2),16)*c)).toString(16).padStart(2,"0")
  return `#${calc(1,2)}${calc(3,2)}${calc(5,2)}`
}

const res = brighten("#23DA4C", .5) // "#116d26"
console.log(res)

答案 7 :(得分：0)

首先快速了解hex color codes。

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

答案 8 :(得分：0)

这样您就不需要对源颜色进行任何转换 看看这个小提琴：https://jsfiddle.net/4c47otou/ 

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

答案 9 :(得分：0)

我发现对Sanghyun Lee的回复的变体产生了最佳结果。

  1. 将RGB转换为HSL
  2. 设置HSL的亮度
  3. 从HSL转换回RGB

差异/变化是增加/降低亮度的方式。

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

与其将百分比应用于当前亮度，不如将其视为绝对增量/减幅效果更好。由于亮度范围是0到1，因此百分比可以应用于整个范围（1-0）*百分比/ 100。

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

此方法的另一个不错的属性是递增和递减彼此取反。

下图显示了以5％为增量的深色和浅色。请注意，调色板的平滑度如何，并且通常以黑白结尾。

Color Palette

采用原始方法的调色板-卡在某些颜色上。

enter image description here

答案 10 :(得分：0)

带有# select data->>'name' as name, data->'work'->>0 as work from friends; #select data->>'name' as name, data->'work'->>0 as work from friends where data->>'name'='Arya'; 的已接受解决方案的简化版本：

lodash

答案 11 :(得分：0)

我使用的是

//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)];
}
相关问题
最新问题