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

Question

我有一个白色的图像，我用作为一个div的背景，我想颜色匹配的主题主色。我知道我能做到:

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

并循环遍历hue-rotate以查找颜色，但是否可以提前计算此值？鉴于指定的十六进制值相当暗，我想我还需要包含invert（%）过滤器。

给定十六进制值为 #689d94我需要执行哪些数学运算来计算所需的色相旋转和反转值，以将白色背景图像转换为相同的颜色？

这是一个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>
<p style="background: #689d94">​</p>

Answer 1

对于 RGB 颜色#689d94，即 rgb（104，157，148），请将每种原色的值除以 255：

将这些权重放入SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="689d94" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" 
        values="0 0 0 0 0.40784 
                0 0 0 0 0.61569 
                0 0 0 0 0.58039 
                0 0 0 1 0"/>
    </filter>
  </defs>
</svg>

<代码>

由于某些浏览器（例如Firefox）在SVG元素的display属性设置为无none时看不到/使用SVG过滤器，并且在HTML代码中使用此SVG元素会不方便地占用一些空间，因此最好的方法是将此SVG转换为纯内联CSS过滤器。

要获取内联过滤器值，请获取上面列出的SVG代码，通过删除换行符和不必要的空格将其转换为一行，然后添加url（'data： image/svg xml，并将前面提到的id附加为#689d94'）：

div {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="71.063" height="60.938"><path d="M33.938 0l-16.97 19.906H1.625L0 21.781v8.781l1.25 1.407h4.781l5.875 28.969h46.969l6.188-28.97h4.687l1.313-1.343v-8.844L69.5 19.906H54.656L37.312 0h-3.375zm1.593 7.594l9.594 12.312H26.25l9.281-12.312zm-20.281 16s-.405 2.9 1.594 3.844c1.998.942 4.406.03 4.406.03-1.666 2.763-3.638 3.551-5.469 2.688-3.312-1.562-.531-6.562-.531-6.562zm41.188.031s2.749 4.969-.563 6.531c-2.487 1.162-4.848-1.541-5.438-2.656 0 0 2.377.88 4.375-.063 1.999-.942 1.625-3.812 1.625-3.812z"/></svg>') no-repeat; // optimized from http://richard.parnaby-king.co.uk/basket.svg
  background-size: 100%;
  display: inline-block;
  height: 5em;
  width: 5em;
}
#colored {
  filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="689d94" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.40784 0 0 0 0 0.61569 0 0 0 0 0.58039 0 0 0 1 0"/></filter></defs></svg>#689d94');
  margin-left: 20px;
}

<!-- No <svg> in HTML; pure CSS -->
<div></div><div id="colored"></div>
<p style="background: #689d94">​</p>

Answer 2

公认的答案是错误的。色调旋转不能保存饱和度或亮度，你必须做疯狂的数学运算才能得出正确的值。更简单的方法——这将产生正确的结果——是做一个引用SVG过滤器的CSS过滤器。SVG过滤器中的feColorMatrix原语允许你直接选择颜色。

用你的颜色#424242 -将每个RGB通道值除以#FF，并将它们放在颜色矩阵的第五列，前三行。在这种情况下，十六进制的#42是十进制的68，所以用它除以255(十进制的#FF)会得到0.257——放在第五列的前三行。

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: url(#colorize);
  filter: url(#colorize);
}

<div>
  </div>

<svg>
<defs>
<filter id="colorize" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 1 0"/>
 
/filter>
</defs>
</svg>

Answer 3

在这种情况下，关键是定义初始颜色。从技术上讲，白色、黑色或任何灰度都是一种实际的颜色——你不能饱和或旋转它。你必须以某种方式“着色”它，棕褐色过滤器是唯一进行某种形式着色的过滤器。

如果你的图像是纯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>