我在JS中有一个颜色值作为字符串
#ff0000
如何编程计算出更亮的颜色，比如#ff4848，并能够通过百分比计算亮度，例如：
increase_brightness('#ff0000', 50); // would make it 50% brighter
JavaScript 计算更亮的颜色
49
- Ozzy
1
2如果您希望在某个或多个颜色通道饱和后能够再次降低亮度，请记得存储原始颜色！ - hughes
12个回答
92
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
**/
- user578895
11
7@WesleyJohnson - 是的，我完全可以写成
256，但是这里的目的是让第9位为1，所以使用 1<<8 更具有逻辑性。如果没有这一部分，如果整个计算结果是5，你将会得到 (5).toString(16) 即为 5。由于我需要长度为2个字符，因此 1<<8 使得它变成了 105，我可以去掉1得到 05。现在为什么要使用 1<<8 而不是 256 呢？如果我需要4位长，我可以输入 1<<16，6位长则为 1<<24 ，8位长则为 (1<<24)*(1<<8) 等等。 - user5788955FYI:
0| 是向下取整数值的方法，与 Math.floor(...) 的功能相同。 - user578895太棒了，非常感谢！是否有可能为Hue或类似的HSB转换做类似的工作？ - SunnyRed
@cwolves：谢谢，但我的意思是，当我将
＃FF0000的色相增加30°时，它会变成＃FF7F00。我找到了以下内容，但仍然无法解决难题https://dev59.com/NlHTa4cB1Zd3GeqPTamw - SunnyRed通过一些浏览和破解，我能够回答自己的问题。如果感兴趣的话：https://dev59.com/2GQm5IYBdhLWcg3wqwfn - SunnyRed
显示剩余6条评论
22
更新
@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;
}
您可以将负值作为“百分比”参数传递，以使其变暗。
- Sanghyun Lee
8
@cwolves 是的，这很复杂。但是，这个解决方案设置了颜色的实际亮度。我认为你的解决方案很简单，但它只计算RGB代码的数量，并且我不认为该数字与亮度成相同的比例增加。 - Sanghyun Lee
@Sangdol - 如果你看生成的数字，它们实际上是相同的。唯一的例外是，通过控制饱和度从0-100值，你还可以内置“变暗”功能。基本上，你的“51-100”是一个“变亮”，其功能与我的代码相同。如果你在我的代码中翻转几个数字，你就可以得到一个“变暗”，它就是你的“0-49”。 - user578895
@cwolves 是的，我发现它们是一样的，就像你说的那样，你的不能让它变暗。但是更简单。:) 我找到了一些与这个问题相关的线程。http://stackoverflow.com/questions/5484389/how-to-modify-color-brightness-in-c https://dev59.com/2XRB5IYBdhLWcg3wCjnO - Sanghyun Lee
3要使其变暗，您只需将
r + (256 - r) * percent / 100 替换为 r * (100 - percent) / 100。就像我说的那样，您的解决方案没有问题，但是RGB->HSL->RGB转换只是浪费时间。亮度简单来说是颜色接近白色或黑色的程度。因此，要使某物更亮50％，您只需将该颜色与白色之间的差异分开即可。相当简单的逻辑 :) - user5788951我尝试了多个问题的多个答案，但这才是我真正想要的。那些答案所做的是无论颜色是浅色还是深色，都通过一定的百分比/数量来减少颜色，使较浅的颜色变得透明，但这个答案将每种颜色都改变为相同的固定百分比，例如变亮95%。 - Lalit Fauzdar
显示剩余3条评论
5
如果有人需要，我已将颜色亮度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
- Concept211
3
这样你就不需要任何源颜色的转换。
看看这个代码片段：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);
- user4602228
1
我非常喜欢使用颜色名称的选项，即使在现实中可能不会经常使用，但仅限于像“海军蓝”或“橄榄绿”这样的常见名称。然而，渐变的计算可以得到改进，因为我认为它们没有得到最佳结果的计算。 - David
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);
}
- Blindy
1
2另外，逻辑是错误的。“增亮50%”实际上意味着“趋近于白色50%”。按照您的逻辑，任何低于128的值都不会变得足够饱和，高于128的任何值都会过度饱和，高于170的值将变为100％饱和。 - user578895
1
这是一个使用RGB->HSL->RGB方法的增加亮度函数。"amount"应该以百分比表示。
HSL<->RGB转换函数取自http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript。
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 };
}
- nobody
1
感谢您的输入！如果需要将
amount转换为百分比，为什么不将其重命名为percent呢？或者像brightnessPercentage这样？ - Sylhare1
我发现 Sanghyun Lee 的回答的一个变体生成了最佳结果。
- 将 RGB 转换为 HSL
- 设置 HSL 的亮度
- 从 HSL 转换回 RGB
差异/变化在于如何增加/减少亮度。
newBrightness = HSL[2] + HSL[2] * (percent / 100) // Original code
不要在当前亮度上应用百分比，把它视为绝对增量/减量更好。由于亮度范围是0到1，所以可以将百分比应用于整个范围(1-0)*percent/100。
newBrightness = HSL[2] + (percent / 100);
newBrightness = Math.max(0, Math.min(1, newBrightness));
这种方法的另一个好处是增量和减量互相抵消。
下面的图像显示了使用5%增量的较暗和较亮的颜色。请注意，调色板相当平滑，并经常以黑色和白色结束。
采用原创方法的调色板 - 在某些颜色上会卡住。
- Krishnan
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)- priolo priolus
1
我知道这是一个老问题，但我没有找到简单操作css hsl颜色的答案。我发现这里的旧答案过于复杂和缓慢，甚至产生了较差的结果，因此需要采用不同的方法。以下替代方案在性能上更高效且更简单。
当然，这个答案要求你在整个应用程序中使用hsl颜色，否则你仍然需要进行大量的转换！虽然，如果你需要在游戏循环中操作亮度，你应该使用hsl值，因为它们更适合编程操作。就我所知，从rgb到hsl的唯一缺点是，与rgb字符串相比，它更难以“读取”你正在看到的色调。
当然，这个答案要求你在整个应用程序中使用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)
- andersand
0
使用 lodash 的变体：
// 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('');
}
- Konstantin Kamkou
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接