CSS hue-rotate 从红色到特定颜色

Posted 2023-02-23

【中文标题】CSS hue-rotate 从红色到特定颜色

【英文标题】：CSS hue-rotate from red to specific colour

【发布时间】：2017-11-21 22:54:21

【问题描述】：

我有一个纯红色 .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/

【问题讨论】：

你能创建一个minimal reproducible example 来演示这个问题吗？特别是编译后的 CSS。另外，您确定您在可以处理过滤器属性的浏览器上查看此内容吗？并非所有浏览器都可以。

@MrLister 谢谢，会的！是的，不用担心重新过滤......我会提供后备。

我不是很精通HSL，所以我不能提供一个完整的解决方案，但是一个问题是brightness函数是一个乘数，所以，因此你实际上在做的是将原始红色（31%）的亮度乘以 60%。但如果你想以绝对值计算 60%，你真的应该乘以 194%！

Here 是一个新的小提琴，带有一个具有正确亮度值的额外框。我一直无法找出为什么色调仍然关闭，所以没有发布作为答案。

31% 是 RGB 系统中红色通道的亮度。所以相对亮度为 31%（相对于纯白色的 100%），这与 HSL 表示法中的亮度不同。但正如我所说，我不是 HSL 专家，我似乎无法通过尝试小提琴中的 CSS 函数来产生相同的颜色。

【参考方案1】：

正如“为什么色调旋转 +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 更改为不同的颜色，您可以简单地创建所需颜色的叠加层，并将其不透明度从零设置为一。如果这没有帮助，请添加更多详细信息，说明您希望完成的任务以及原因。

【参考方案2】：

如果目标只是将图像的颜色从红色更改为其他特定颜色，您可以使用 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 值的最后一个参数输入）。

这是您要查找的内容，还是您特别需要使用过滤器？