评估HEX值是暗还是亮

Question

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

问题是,默认情况下,这些图层上的文字是黑色的...我要做的是评估用户通过选择器选择的HEX值,并以编程方式在黑白文本之间切换 - 这可以是JavaScript,或代码背后.

问题的关键在于我只是不确定如何评估HEX以确定所选颜色与黑色的接近度是否太接近使用黑色文本.

有任何想法吗？

Answer 1

而不是像其他回答者(ricknz)所说的那样将RGB组件添加到一起,你应该实际取其平均值.

此外,由于人眼对绿色比蓝色更明显,因此您还应该增加重量.

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

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

编辑:这是一个计算它的片段:

 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;
 }

ps除以256,因为我们RGB从0-256(而不是0-1)运行

编辑:将计算结果更改为除以256而不是768作为巧妙评论

Answer 2

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

这是一个用于进行转换的javascript函数.

Answer 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
    }