十六进制颜色 - 使其更亮的公式

Question

有没有一种公式可以让十六进制颜色值变得更亮？

- Ben Shelock

Answer 1

你可以使用维基百科这里提供的公式将RGB颜色模式转换为HSV颜色模式。接着增加V（亮度）值，再使用同一页下方的公式将颜色模式转换回RGB。

- Mike Cooper

---

或者使用在线转换器 http://www.rapidtables.com/convert/color/rgb-to-hsv.htm。反向转换器也在那里。记住 - 是 Value，HSV 的第三部分增加。对我来说，第一个似乎是自然的选择。 - Stephen Hosking

Answer 2

标准答案是将其转换为具有亮度作为一轴的不同颜色空间，然后直接操作该值。我不喜欢这个答案，因为它没有告诉你当你超出颜色空间范围时会得到什么。

如果更亮意味着更强烈，您可以将每个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)。

- Mark Ransom

---

将[0,255]映射到[o，inf)区间内，进行乘法运算，然后再映射回[0,255]区间怎么样？这样可以避免色域问题，但我猜你会得到不同的色调和饱和度结果，具体取决于使用哪个映射... - naught101

@naught101，这与将结果简单地夹紧到255相同。这是一种可行的策略，但我认为我的更好。此外，如何扩展到无限大？ - Mark Ransom

嗯.. tan((pi/2)*x/255)? (在x=255时技术上未定义，因此您可能需要除以256或255.0001或其他一些值)。有许多压缩函数可以反向使用，并且我认为它们在该区间上都具有反函数（尽管可能没有一个漂亮易用的代数函数）。 - naught101

这是老的帖子但我想加个评论：RBG所有值增加20%的想法是正确的，但不正确的是如何处理超过255的值。你应该做的是确定将最高值提高到255所需的百分比增加量，然后将该百分比应用于另外两个值。因此，(50,192,240)乘以1.0265即可得到(53,204,255)。在HSB中，颜色从(195,79,94)变为(195,79,100)，这正是你想要的。 - ScottyB

@ScottyB 你有没有在你上面评论中检查我的链接？这段代码可以通过向颜色添加白色来超越255的最高值。这会导致减少饱和度，但这是不可避免的，结果符合直觉预期。 - Mark Ransom

Answer 3

如果您使用的是VS Code，有一个快速技巧。只需将鼠标悬停在颜色十六进制值上，就会弹出一个颜色选择器。

点击顶部区域可以从十六进制符号转换为hsla、rgba等。按照下面显示的方式转换为hsl/hsla符号。

现在根据您的需要更改亮度（在hsl / hsla函数中的第三个参数）。一旦您对高度水平感到满意，请将鼠标悬停在色彩上（现在是hsl符号），并通过点击颜色选择器弹出窗口的标题区域将其转换回十六进制。

注意: 请不要因以上2个截图使用的不同颜色而感到困惑。每个截图对应同一个CSS文件中的不同颜色。

- Mayank Kumar Chaudhari

Answer 4

既然颜色只是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，则不要更改它;)

- Darko

---

在我看来，那会改变颜色。 - ChrisW

进一步解释ChrisW的评论，想象一下颜色#800000，一种深沉但强烈的红色。以这种方式使其变亮会导致#ff7f7f，更接近粉红色而不是红色。 - Mark Ransom

该色域中有1600万种颜色。更改任何值都会改变“颜色”。我认为这可能意味着它会改变r/g/b比例，这只是一个单一维度的“颜色”的任意轴。 - RBarryYoung

这更多是一种快速、近似的亮度调整，用于避免与HSL混淆 - 我可能应该声明这一点。同时感谢Mark指出逻辑上的缺陷，我已经修正了新规则。 - Darko

Mark Ransom，你刚刚请求了一种浅红色，但不是粉色... - Marius

新规则没有帮助。想象一下从＃800101开始而不是＃800000。 - Mark Ransom