如何将Hex颜色转换为Hex黑白?

时间:2013-05-31 13:46:06

标签: css

我可以使用像GIMP这样的程序来解决这个问题,但我认为手动进行计算会更容易,即如果我知道如何。

如果我说:

#FF0000 (red)

如何在HEX中将其转换为黑白等效物。

一个猜测是取每个RGB值的平均值,并应用于每个颜色空间。

所以

(0xff + 0x00 + 0x00) / 3 = 255 / 3 = 85 = 0x55

会来

#555555

这是对的吗?这只是猜测。

3 个答案:

答案 0 :(得分:3)

转换为Y'UV,并且取Y'分量将更准确地表示RGB值的灰度值。我知道压缩高清(720p)分辨率视频和全高清(1080p)分辨率视频之间的视频压缩转换公式不同。因此,转换为灰度并不是一件容易的事。似乎有一些人为因素决定灰色全亮红色是多少。

无论如何,假设col是您的初始颜色值,您正在寻找的公式是:

(((((((col >> 16) & 0xff)*76) + (((col >> 8) & 0xff)*150) +
((col & 0xff)*29)) >> 8)) << 16) |

(((((((col >> 16) & 0xff)*76) + (((col >> 8) & 0xff)*150) + 
((col & 0xff)*29)) >> 8)) << 8) | 

((((((col >> 16) & 0xff)*76) + (((col >> 8) & 0xff)*150) + 
((col & 0xff)*29)) >> 8))

顺便提一下,您的#FF0000使用此公式成为#4B4B4B。

答案 1 :(得分:0)

如何将HEX颜色转换为HEX灰度:

  1. 将HEX转换为RGB
  2. R =红色值,G =绿色值,B =蓝色值,X =灰度值
  3. 所以我们知道R,G&amp; B,我们需要锻炼X
  4. 为此,我们使用此公式......

    X =(0.58 x R)+(0.17 x G)+(0.8 x B)

  5. 灰度RGB值是R = X,G = X,B = X
  6. 转换回HEX
  7. 如果我们将此公式应用于您的#FF0000颜色,则输出为#949494。 如果您打开Photoshop,转换是相同的(取决于您的颜色首选项)。我还测试了许多其他混合颜色,转换与Photoshop完全匹配。

    我是如何获得这些价值的?

    如果您打开Photoshop,请创建一个红色,绿色和蓝色并转换为灰度然后使用眼药水测试转换后的颜色,值如我的公式所示。

    现在,您可以在脚本中使用此公式自动转换为灰度!

答案 2 :(得分:0)

关闭用户1637281的答案,Y&#UV方法很好,但他选择了错误的乘数,假设你的颜色是RGB十六进制代码。以下是来自同一Wikipedia link的正确乘数。

int ConvertToBlackAndWhite(int col)
{
    int r = col >> 16;
    int g = (col >> 8) & 0xff;
    int b = col & 0xff;
    int bnw = int(r * 0.299 + g * 0.587 + b * 0.114) & 0xff;
    return (bnw << 16) | (bnw << 8) | bnw;
}

另一种选择是简单地平均三个值,这是您原始问题的目的。

int bnw = int((r + g + b) / 3) & 0xff;

使用Y&#39;的方法实际上最终会非常接近于在大部分时间内简单地平均它们,但最终会在颜色之间产生更高的对比度。例如,如果您只是平均3个值,则0xFF0000,0x00FF00和0x0000FF看起来都是一样的。