十六进制颜色 - 让它更明亮的公式
是否有一个公式可以用来使十六进制颜色值更亮?
Is there a formula I can use to make a hex colour value brighter?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
是否有一个公式可以用来使十六进制颜色值更亮?
Is there a formula I can use to make a hex colour value brighter?
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(4)
您可以转换为 HSV(使用维基百科此处中的公式)然后增加值,然后使用同一页面下方的公式转换回来。
You could convert to HSV (using a formula from wikipedia here) Then increase the Value, then convert back, with the formula from lower on the same page.
标准答案是转换为以亮度为一个轴的不同颜色空间,然后直接操纵该值。我不喜欢这个答案,因为它没有告诉您当超出色彩空间色域时会得到什么。
如果“更亮”意味着更强烈,则只需将每个 R、G、B 值乘以相同的值即可,其中该值 > 1. 例如,要使其亮度提高 20%,请将每个值乘以 1.2。
如果任何结果值大于 255,则说明超出了 RGB 色域的限制。在这种情况下,最好的办法可能是让颜色更接近白色,这样颜色会更浅,但饱和度或强度较低。我们以起始 RGB (50,192,240) 为例,您希望将其亮度提高 20%。结果是 (60,230,288) - 红色和绿色在范围内,但蓝色太亮并且溢出了。取出多余的部分,将其平均分配给其他颜色 - 288-255 是 33,因此将 16.5 添加到红色和绿色;四舍五入后的结果为 (77,247,255)。
The standard answer is to convert to a different color space that has brightness as one axis, then manipulate that value directly. I don't like that answer, because it doesn't tell you what you'll get when you exceed the color space gamut.
If by brighter you mean more intense, you can just multiply each R,G,B value by the same value, where that value is > 1. For example, to make it 20% brighter, multiply each value by 1.2.
If any of the resulting values are greater than 255, you've exceeded the limits of the RGB gamut. Probably the best thing to do in that case is to bring the color closer to white, so it's lighter but less saturated or intense. Let's take the example of a starting RGB of (50,192,240) that you want to make 20% brighter. The result is (60,230,288) - red and green are within bounds, but blue is too bright and has overflowed. Take the excess and distribute it to the other colors equally - 288-255 is 33, so add 16.5 to the red and green; rounding gives you a result of (77,247,255).
如果您使用 VS Code,有一个快速技巧。只需将鼠标悬停在颜色十六进制上,您就会看到弹出的颜色选择器。
单击顶部区域可将颜色从十六进制表示法更改为 hsla、rgba 等。转换为 hsl/hsla 表示法,如下所示。
现在根据您的要求更改亮度(
hsl
/hsla
函数中的第三个参数)。一旦您对高度级别感到满意,请将鼠标悬停在颜色上(现在采用 hsl 表示法),然后通过点击颜色选择器弹出窗口的标题区域将其转换回十六进制。If you are using VS Code, there is a quick hack. Just hover the mouse over the color hex and you will see a color selector popup.
Click on the top area to change color from hex notation to hsla, rgba, etc. Convert to the hsl/hsla notation as shown below.
Now change the lightness (the third parameter in the
hsl
/hsla
function) as per your requirement. Once you are happy with the highness level hover over the color (now in hsl notation) and convert it back to hex by tapping on the header area of the color selector popup.显然,颜色只是 r/g/b 的 3 个字节,您可以做的是将每个字节转换为 int (0-255),并将每个字节增加相同的任意数字。最后将每个字节转换回十六进制。示例:
从颜色开始:
#224466
转换为整数,即
r = 34
、g = 68
和b = 102
>增加任意数字(例如 60),您将得到
r = 94
、g = 128
和b = 162
转换回十六进制可以得到:
#5E80A2
请注意,上限为 255(白色),底部为 0(黑色)
编辑: 正如 Mark 指出的那样,这存在一个缺陷。它可以通过附加规则来修复:如果初始值为 0,则不要更改它;)
Well seeing as colours are just 3 bytes of r/g/b what you can do is convert each byte to an int (0-255) and increase each byte by the same arbitrary number. Finish by converting each byte back to hex. Example:
Starting with colour:
#224466
Converted to ints thats
r = 34
,g = 68
andb = 102
Increment by an arbitrary number (say 60) you get
r = 94
,g = 128
andb = 162
Convert back to hex gives you:
#5E80A2
Note that the top limit is 255 (white) and bottom is 0 (black)
EDIT: As Mark points out theres a flaw with this. It can be fixed by an additional rule: If the initial value is at 0 then dont change it ;)