Question

我有一个平坦的红色.png图像，我希望通过使用CSS过滤器将其更改为特定颜色。我认为这是最好的方法。

我正在使用SASS，通过使用它，我可以获得颜色的色调，饱和度和亮度。通过使用“红色”图像，这意味着色调的旋转度从0开始，因此使用hue-rotate然后我将其从0旋转到特定颜色的色调度。与饱和度和亮度相同。

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

输出为：

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%);如果我检查特定颜色的HSL是什么......

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

然而，在应用此图像时，图像非常暗。看起来像正确的色调，但饱和度和亮度是错误的？

有关我在哪里做错的任何想法？我看了一下这个例子：How to calculate required hue-rotate to generate specific colour?但似乎给了我同样的问题。

https://jsfiddle.net/gosj0ur2/

Answer 1

如果目标只是将图像的颜色从红色更改为其他特定颜色，则可以使用CSS伪选择器来创建一种叠加，因此您无需使用过滤器。这样的事情，也许是：

HTML：

<div class='boo'></div>

的CSS：

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

https://codepen.io/thebabydino/pen/AtzpB

在你的情况下，你不会有一张猫的图片......并且叠加层不是半透明的，它将是完全不透明的（只需更改RGBA值的最后一个参数输入）。 / p>

这是您正在寻找的，还是您特别需要使用过滤器？

Answer 2

正如在＆＃34中指出的那样，为什么没有+ 180度的旋转和-180度的旋转产生原始颜色？＆＃34;过滤器实际上不遵循HSL颜色空间。我尝试手动匹配颜色：我从以下值得到了最好的结果： hue-rotate(174deg) saturate(64%) brightness(224%)。

亮度与亮度完全不同。亮度是从0（黑色）到50％（纯色）到100％（白色）的比例。亮度是R，G和B值的乘数，因此亮度（0）创建黑色，亮度（1）保持颜色不变，但亮度（2）只是每个RGB值的两倍。从一个到另一个没有简单的公式。

我不清楚你为什么要尝试以你的方式创造色彩，但我建议采用另一种方法。例如，jQuery UI允许您为颜色变化设置动画，如果这是您的意图;要将您的平面红色.png直观地更改为不同的颜色，您可以简单地创建所需颜色的叠加层，并将其不透明度从零设置为1。如果这没有帮助，请添加有关您希望完成的内容以及原因的更多详细信息。

CSS色调 - 从红色旋转到特定颜色

2 个答案: