十六进制颜色 - 使其更亮的配方答案

【问题标题】：Hex Colour - Formula To Make It Brigter十六进制颜色 - 使其更亮的配方
【发布时间】：2010-11-21 23:50:13
【问题描述】：

有什么公式可以让十六进制颜色值更亮吗？

【问题讨论】：

标签： javascript css colors hex

【解决方案1】：

您可以转换为 HSV（使用来自维基百科 here 的公式）然后增加 V值，然后再转换回来，使用同一页面下方的公式。

【讨论】：

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

【解决方案2】：

标准答案是转换为以亮度为轴的不同颜色空间，然后直接操纵该值。我不喜欢这个答案，因为它没有告诉你当你超过色彩空间域时你会得到什么。

如果更亮意味着更强烈，您可以将每个 R、G、B 值乘以相同的值，其中该值 > 1。例如，要使其更亮 20%，请将每个值乘以 1.2。

如果任何结果值大于 255，则您已超出 RGB 色域的限制。在这种情况下，最好的办法可能是使颜色更接近白色，因此它更轻但不那么饱和或强烈。让我们以 (50,192,240) 的起始 RGB 为例，您想让它变亮 20%。结果是 (60,230,288) - 红色和绿色在范围内，但是蓝色太亮并且溢出了。取多余的，平均分配给其他颜色——288-255是33，所以红色和绿色加16.5；四舍五入的结果为 (77,247,255)。

【讨论】：

感谢您提请我注意此问题。甚至没有意识到这一点。
如何将 [0,255] 映射到 [o,inf)、相乘，然后映射回 [0,255]？这样可以避免色域问题，但我猜你会得到不同的色调和饱和度结果，具体取决于你使用的地图......
@naught101，这与简单地将结果限制为 255 相同。这是一个可行的策略，但我认为我的策略更好。此外，如何扩展到无穷大？
嗯.. tan((pi/2)*x/255)? （技术上未定义为 x=255，因此您可能希望除以 256 或 255.0001 或其他值）。有许多 squashing functions 反过来说，我认为它们在那个区间上都有倒数（尽管可能没有一个很好用的代数）。
@naught101 我对另一个问题有类似的回答，我留下了一些代码来处理超出范围的情况。它工作得很好。 stackoverflow.com/questions/141855/…

【解决方案3】：

如果您使用的是 VS Code，有一个快速破解方法。只需将鼠标悬停在颜色十六进制上，您就会看到一个颜色选择器弹出窗口。

点击顶部区域可将颜色从十六进制表示法更改为 hsla、rgba 等。转换为 hsl/hsla 表示法如下所示。

现在根据您的要求更改亮度（hsl / hsla 函数中的第三个参数）。一旦您对高度级别感到满意，将鼠标悬停在颜色上（现在以 hsl 表示法），然后通过点击颜色选择器弹出窗口的标题区域将其转换回十六进制。

注意：请不要与以上 2 个屏幕截图中使用的不同颜色混淆。每个屏幕截图对应同一个 css 文件中的不同颜色。

【讨论】：

【解决方案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，则不要更改它；）

【讨论】：

这会改变颜色，imo。
为了扩展 ChrisW 的评论，想象一种颜色 #800000，一种深而强烈的红色。以这种方式将其变亮会导致#ff7f7f，比红色更接近粉红色。
该色域中有 1600 万种颜色。更改 any 值会更改“颜色”。我认为这可能意味着它改变了 r/g/b 比率，这只是“颜色”单一维度的任意轴。
Mark Ransom，你刚刚提出了著名的浅红色要求，但不是粉红色......
新规则没有帮助。想象一下从 #800101 而不是 #800000 开始。