评估HEX值是暗还是亮

时间:2009-11-18 07:29:50

标签: asp.net javascript css user-experience

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

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

问题的症结在于,我只是不确定如何评估十六进制以确定所选颜色与黑色的接近度是否太接近使用黑色文本。

有什么想法吗?

4 个答案:

答案 0 :(得分:15)

而不是像其他回答者(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;
 }

P.S。因为我们RGB从0-256(而不是0-1)运行

,所以除以256

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

答案 1 :(得分:10)

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

以下是进行转化的javascript function

答案 2 :(得分:4)

执行此操作的方法现已构建到.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
    }

答案 3 :(得分:1)

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

对于#010203,将RGB值加在一起得到01 + 02 + 03 = 06.这将比#102030 = 60更暗。

相关问题