CSS 色相旋转从红色到特定颜色

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

然而，当应用此方法时，图像非常暗。 看起来色调正确，但饱和度和亮度不对吗？对我哪里出了问题有什么想法吗？我查看了这个示例：如何计算所需的色调旋转以生成特定颜色？，但似乎出现了同样的问题。 https://jsfiddle.net/gosj0ur2/

- John the Painter

---

你能否创建一个[mcve]来演示这个问题？特别是编译后的CSS。另外，你确定你正在使用支持filter属性的浏览器查看吗？并非所有浏览器都支持。 - Mr Lister

@MrLister 谢谢，我会的！而且不用担心过滤器...我会提供备选方案。 - John the Painter

我并不是很精通HSL，所以无法提供完整的解决方案。但其中一个问题是brightness函数是一个乘数，因此你实际上是将原始红色（31%）的亮度乘以60%。但如果你想要绝对达到60%，你应该将其乘以194%！ - Mr Lister

HSL对于红色不是0,100,100吗？你从哪里得到了红色31%的值？ - John the Painter

在RGB系统中，红色通道的亮度为31％。因此，相对于纯白的100％而言，相对亮度为31％，这与HSL符号中的亮度不同。但正如我所说，我不是HSL专家，并且似乎无法通过在小提琴中尝试CSS函数来产生相同的颜色。 - Mr Lister

Answer 1

如果目的仅仅是将一张图片从红色改变为其他特定颜色，您可以使用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: ' ';
}

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

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

在您的情况下，您不会有一张猫的图片...覆盖层不会是半透明的，它将是完全不透明的（只需为RGBA值更改最后一个参数输入）。

这符合您的要求吗？或者您特别需要使用过滤器吗？

- David

Answer 2

正如在“为什么色相旋转+180度和-180度不能产生原始颜色？”中所指出的，滤镜实际上并不遵循HSL颜色空间。我尝试手动匹配颜色：我从以下值中获得了最佳结果：hue-rotate(174deg) saturate(64%) brightness(224%)。

亮度与明度完全不同。明度是一个从0（黑色）到50％（纯色）到100％（白色）的刻度。亮度是R、G和B值的乘数，因此Brightness（0）会创建黑色，Brightness（1）会保持颜色不变，但是brightness（2）只是将每个RGB值加倍。没有简单的公式可以从一个值转换到另一个值。

我不清楚您为什么要以这种方式创建颜色，但我建议采用另一种方法。例如，jQuery UI允许您动画更改颜色，如果这是您的意图；要将平面红色.png可视化地更改为其他颜色，您可以简单地创建所需颜色的覆盖层，并将其不透明度从零逐渐增加到一。如果这没有帮助，请添加有关您希望实现的内容以及原因的更多详细信息。

- WahhabB