评估 HEX 值是暗还是亮

Posted 2023-02-22

【中文标题】评估 HEX 值是暗还是亮

【英文标题】：Evaluate whether a HEX value is dark or light

【发布时间】：2010-12-17 18:34:44

【问题描述】：

我正在构建的 ASP.NET Web 应用程序的用户可以选择用于某些元素（例如按钮/标题）的颜色，以促进某种程度的个性化。

问题在于，默认情况下，这些图层上的文本是黑色的......我要做的是评估用户通过选择器选择的 HEX 值，并以编程方式在黑白文本之间切换 - 这个可以在 javascript 中，也可以在后面的代码中。

问题的症结在于，我只是不确定如何评估 HEX 以决定所选颜色与黑色的接近程度是否太接近而无法使用黑色文本。

有什么想法吗？

【参考方案1】：

不要像其他回答者 (ricknz) 所说的那样将 RGB 分量加在一起，实际上应该取它们的平均值。

此外，由于人眼比蓝色更容易看到绿色，因此您还应该添加权重。

所以你必须先将红色分量乘以 0.299，绿色乘以 0.587，蓝色乘以 0.114

所以亮度由下式给出：亮度 = (r*0.299 + g*0.587 + b*0.114)/3

编辑： 这是一个计算它的sn-p：

 float calcLuminance(int rgb)
 
      int r = (rgb & 0xff0000) >> 16;
      int g = (rgb & 0xff00) >> 8;
      int b = (rgb & 0xff);

      return (r*0.299f + g*0.587f + b*0.114f) / 256;
 

附言除以 256，因为我们 RGB 的范围是 0-256（而不是 0-1）

编辑：将计算更改为除以 256 而不是 768，如巧妙地评论

【讨论】：

如果您只是比较明暗对比，取平均值不会改变结果。

在任何情况下，(r*0.299f + g*0.587f + b*0.114f) 将始终在 0-255 范围内，而不是 768

这是一种非常有趣的亮度计算方法，它会产生与我的答案不同的结果——这是（据我所知）标准亮度计算。你从哪里得到这些数字的？

johannes: wikipedia..where else ;^) en.wikipedia.org/wiki/YUV YUV 的 Y 部分是亮度。

经过测试（感谢 Johannes Hoff 提供的链接），这无疑是最可靠的方法，并且很好地处理了果岭，这很快证明了其他方法的问题。

【参考方案2】：

转换为HSL 并查看Luminance 值。这会告诉你它有多亮。

这是用于进行转换的javascript function。

【讨论】：

要将字符串转换为数字，例如parseInt("coffee".substring(0,2), 16) for red

感谢链接 (+1)，他们帮助我构建了一个快速测试器 - 它工作得很好，但正如 reinier 所建议的那样，在绿色和黄色上似乎不太准确。

链接已损坏。请把代码放在答案中，人们！

Doug S：我一般同意答案中的代码，但是 HSL 转换代码太大，我觉得它会减损答案； rgb 到 hsl 的转换代码应该很容易找到。我用 wikipedia 和 *** 链接替换了这些链接。希望它们能持续更长时间:)

【参考方案3】：

现在 .Net 中内置了执行此操作的方法：

    var hexcolor = "#FA3CD0";
    var color = System.Drawing.ColorTranslator.Fromhtml(hexcolor);
    var brightness = color.GetBrightness();
    if (brightness > .5)
    
        // color is light
    
    else
    
        // color is dark
    

【参考方案4】：

十六进制颜色代码由三个强度值组成，一个代表红色，一个代表绿色，一个代表蓝色，每个都有 2 个十六进制数字。要确定暗与亮，只需将三个值相加即可。较小的数字会比较大的值更暗。

对于#010203，将 RGB 值相加得到 01+02+03 = 06。这将比 #102030 = 60 更暗。

【讨论】：

谢谢 - 当您进入 AA>FF 值时，您会如何评估？

ricknz：这是不正确的，因为眼睛比蓝色更容易看到绿色

对于 AA 到 FF，您只需将两位数的值从 Hex 转换，然后进行数学运算。在 JavaScript 中，您可以使用 parseInt() 函数。 @reinier：是的，但只是添加它们会给出一个粗略的近似值，相当于简单的颜色 --> 灰度/黑白转换。

运行良好且非常容易实施 - 不像 reinier 提供的解决方案那样准确的 IMO。再次感谢