为什么 'filter: invert(1) hue-rotate(180deg)' 会把红色变成桃粉色?
Why does 'filter: invert(1) hue-rotate(180deg)' turn red into a peachy-pink color?
在CSS,当你申请
filter: invert(1) hue-rotate(180deg)
一张图片,红色变成桃粉色。
为什么会这样,如何才能使用 CSS 反转图像并让红色看起来像红色?
示例:
应用了 filter: invert(1) hue-rotate(180deg)
的同一图像:
更新:
最初的回答中建议将上述滤镜应用于 html
元素,然后将其应用于图像。颜色看起来仍然不对。这是结果:
当您使用 hue-rotate 时,您将绕过色轮。如果您要执行 hue-rotate(180deg),您将绕色轮旋转 180deg。反转过滤器用于简单地反转颜色。要将图像更改为正确的颜色,请执行以下操作:
首先添加滤镜:反转(1)色调旋转(180度)到html
然后为图像添加相同的内容。这应该有效
理解为什么我们需要进行一些数学运算。
如果我们从 invert(1)
(最简单的)开始,我们将使用 f(x) = (255 - x)
。所以
rgb(255,0,0)
将变为 rgb(0,255,255)
对于 hue-rotate(180deg)
它更复杂。考虑 the specification 我们将得到以下矩阵:
-0.574 1.43 0.144
0.426 0.43 0.144
0.426 1.43 -0.856
所以我们将有
R' = -0.574*R 1.43*G 0.144*B = 1.43*255 + 0.144*255 = 401.37
G' = 0.426*R 0.43*G 0.144*B = 0.43*255 + 0.144*255 = 146.37
B' = 0.426*R 1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37
然后是最终颜色 rgb(255,146.37,146.37)
,不是红色
html {
background: rgb(255, 146.37, 146.37)
}
what can be done to use CSS to invert an image and still have red look like red?
这取决于你想得到什么结果考虑其他颜色,但你可以添加一个 staturate()
过滤器来恢复你的红色:
img {
filter: invert(1) hue-rotate(180deg) saturate(10);
}
<img src="https://i.stack.imgur.com/jikdT.png">
再次进行一些数学运算以了解正在发生的事情。根据相同的规范并经过一些简化,我们将得到以下矩阵:
7.87 -7.15 -0.72
-2.13 2.85 -0.72
-2.13 -7.15 9.28
所以
R' = 7.87*R -7.15*G -0.72*B = 7.87*255 - 7.87*146.37 = bigger than 255
G' = -2.13*R 2.85*G -0.72*B = -2.13*255 + 2.13*146.37 = negative
B' = -2.13*R -7.15*G 9.28*B = -2.13*255 + 2.13*146.37 = negative
最终颜色rgb(255,0,0)
在CSS,当你申请
filter: invert(1) hue-rotate(180deg)
一张图片,红色变成桃粉色。
为什么会这样,如何才能使用 CSS 反转图像并让红色看起来像红色?
示例:
应用了 filter: invert(1) hue-rotate(180deg)
的同一图像:
更新:
最初的回答中建议将上述滤镜应用于 html
元素,然后将其应用于图像。颜色看起来仍然不对。这是结果:
当您使用 hue-rotate 时,您将绕过色轮。如果您要执行 hue-rotate(180deg),您将绕色轮旋转 180deg。反转过滤器用于简单地反转颜色。要将图像更改为正确的颜色,请执行以下操作:
首先添加滤镜:反转(1)色调旋转(180度)到html
然后为图像添加相同的内容。这应该有效
理解为什么我们需要进行一些数学运算。
如果我们从 invert(1)
(最简单的)开始,我们将使用 f(x) = (255 - x)
rgb(255,0,0)
将变为 rgb(0,255,255)
对于 hue-rotate(180deg)
它更复杂。考虑 the specification 我们将得到以下矩阵:
-0.574 1.43 0.144
0.426 0.43 0.144
0.426 1.43 -0.856
所以我们将有
R' = -0.574*R 1.43*G 0.144*B = 1.43*255 + 0.144*255 = 401.37
G' = 0.426*R 0.43*G 0.144*B = 0.43*255 + 0.144*255 = 146.37
B' = 0.426*R 1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37
然后是最终颜色 rgb(255,146.37,146.37)
,不是红色
html {
background: rgb(255, 146.37, 146.37)
}
what can be done to use CSS to invert an image and still have red look like red?
这取决于你想得到什么结果考虑其他颜色,但你可以添加一个 staturate()
过滤器来恢复你的红色:
img {
filter: invert(1) hue-rotate(180deg) saturate(10);
}
<img src="https://i.stack.imgur.com/jikdT.png">
再次进行一些数学运算以了解正在发生的事情。根据相同的规范并经过一些简化,我们将得到以下矩阵:
7.87 -7.15 -0.72
-2.13 2.85 -0.72
-2.13 -7.15 9.28
所以
R' = 7.87*R -7.15*G -0.72*B = 7.87*255 - 7.87*146.37 = bigger than 255
G' = -2.13*R 2.85*G -0.72*B = -2.13*255 + 2.13*146.37 = negative
B' = -2.13*R -7.15*G 9.28*B = -2.13*255 + 2.13*146.37 = negative
最终颜色rgb(255,0,0)