css - 如何将十六进制颜色转换为十六进制黑白？

Question

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

如果我说：

#FF0000 (red)

如何将其转换为十六进制中的黑白等效项。

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

所以

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

会来

#555555

这个对吗？这只是一个猜测。

Answer 1

转换为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。

Answer 2

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

1. 将十六进制转换为 RGB
2. R = 红色值，G = 绿色值，B = 蓝色值，X = 灰度值
3. 所以我们知道 R、G 和 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. 转换回十六进制

如果我们将此公式应用于您的#FF0000 颜色，则输出为#949494。如果您打开 Photoshop，则转换是相同的（取决于您的颜色偏好）。我还测试了许多其他混合颜色，转换与 Photoshop 完全匹配。

我是如何得到这些值的？

好吧，如果你打开 Photoshop，创建一个红色、绿色和蓝色的点并转换为灰度，然后使用滴眼液测试转换后的颜色，值如我的公式所示。

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

Answer 3

离开user1637281的回答，Y'UV方法很好，但他选择了错误的乘数，假设你的颜色是RGB十六进制代码。这是来自同一维基百科链接的正确乘数。

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' 的方法实际上在大多数情况下最终会非常接近于简单地平均它们，但最终会导致颜色之间的对比度更高。例如，如果你只是平均 3 个值，0xFF0000、0x00FF00 和 0x0000FF 看起来都一样。