如何计算所需的色相旋转以生成特定的颜色？

Question

我有一张白色图片，正在用作div的背景，并且我想进行着色以匹配主题的主色。我知道我可以做：

filter: sepia() saturate(10000%) hue-rotate(30deg);

并循环hue-rotate查找颜色，但是可以预先计算出该值吗？鉴于指定的十六进制值非常暗，我想我也需要包括invert(%)过滤器。

给定十六进制值，#689d94我需要执行什么数学运算来计算期望值hue-rotate和invert将我的白色背景图像转换为相同颜色的值？

编辑

这是一个div带有绿色过滤的白色背景图像的片段。这里的窍门div是，被过滤的是整个对象，而不仅仅是图像。如果要div在文本中输入一些文本，则文本颜色也会变为绿色。

div {

  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;

  background-size:5em;

  width:5em;

  height:5em;

  -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);

  filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);

}


<div>

  </div>

Answer 1

在这种情况下，关键是定义初始颜色。从白色到黑色或任何灰度，从技术上来说都是真实的颜色-
您不能使其饱和或旋转。您必须以某种方式对其进行“着色”，而棕褐色滤镜是唯一进行某种形式着色的滤镜。

如果您的图像是100％纯红色，会更容易。然后，您可以直接添加目标度，并使用HSL作为目标来调整饱和度和亮度。对于白色起始点，第一步是转换并定义中间色，以便稍后可以对其进行饱和和旋转。

首先，使白色图像变暗并应用棕褐色以获得可以与之配合使用的“基础”颜色：

filter: brightness(50%) sepia(1);

这将产生大约RGB颜色值：

rgb(178, 160, 128)

第二步是将其转换为HSL颜色空间，从而得到：

hsl(38, 24.5%, 60%);

div {

  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;

  background-size:5em;

  width:5em;

  height:5em;

  -webkit-filter: brightness(50%) sepia(1);

  filter: brightness(50%) sepia(1);

}


<div></div>

将基本色转换为目标色

这两个第一步是静态的，每当我们需要查找目标调整时（其 乌贼墨 的实际值在SVG过滤器规范中定义），其结果都将被重用。

现在，我们需要计算需要应用到该基础颜色的颜色以获得目标颜色。首先将目标颜色（例如问题中给定的＃689d94）转换为HSL：

hsl(170, 21.3%, 51.2%);

然后我们必须计算两者之间的差异。色调是通过简单地从目标中减去基数来计算的。对于“饱和度”和“亮度”相同，但是由于我们假设基本值是100％，因此我们需要从100％中减去结果以得出累加值的差异：

H:  170 - 38             ->  132°
S:  100 + (24.5 - 21.3)  ->  103.2%  (relative to base 100% =  3.2%)
L:  100 + (51.2 - 60.0)  ->   91.2%  (relative to base 100% = -8.8%)

通过将这些值附加到现有过滤器，然后将这些值转换为过滤器字符串，然后在div上进行设置：

/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

并设置它，您可能会假设已经声明了filter和divElement，进行了如下操作：

...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;

请注意，由于RGB表示为整数，而HSL是浮点数，因此可能会产生舍入误差，因此实际结果可能不准确，但应该非常接近。

现场例子

div {

  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;

  background-size:5em;

  width:5em;

  height:5em;

  -webkit-filter:

      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

  filter:

      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

}


<div></div>

<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">

Target color</span>

可行的替代选择是：

• 使用已设置的颜色预定义SVG。
• 直接在JavaScript中使用HSL / RGB，并直接使用形状的颜色修改SVG树，而不是使用滤镜。过滤器在性能上是昂贵的，特别是如果许多过滤器如此处那样链接在一起，并且它们另外是页面的主要部分。所有浏览器均不支持它们。