JavaScript计算更明亮的颜色
我有一个JS的颜色值作为一个string
#ff0000 我将如何去编程计算这种颜色的更亮/更亮的版本，例如#ff4848 ，并能够通过百分比来计算亮度，例如
increase_brightness('#ff0000', 50); // would make it 50% brighter
function increase_brightness(hex, percent){ // strip the leading # if it's there hex = hex.replace(/^\s*#|\s*$/g, ''); // convert 3 char codes --> 6, eg `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 **/
更新
@ zyklus的答案更简单，并具有相同的效果。 仅当您有兴趣在RGB和HSL之间转换时，请参考此答案。
要设置RGB的亮度：
-
将RGB转换为HSL
-
设置HSL的亮度
-
从HSL转换回RGB
此链接用于具有将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参数使其变暗。
如果有人需要它，我将颜色亮度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
// 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/
这是RGB-> HSL-> RGB方法的增亮function。 “金额”应该以百分比表示。
HSL < – > 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 }; }
首先快速了解hex颜色代码 。
然后，将颜色值分解为RGB，进行调整，然后返回新的颜色代码应该很容易。
这样你就不需要任何源代码的转换。
看看这个小提琴： 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);
