logo标签列表

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

htmlcsssvgsvg-filterscss-filters
90

我有一张白色的图片作为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>
<p style="background: #689d94">​</p>

能否使用内联SVG滤镜？ - Richard Parnaby-King
回复：“是否可以使用内联SVG滤镜？”——是的，绝对可以——请参见下面我的答案。 - Ωmega
6个回答
101
在这种情况下，关键是定义一个初始颜色。白色、黑色或任何灰度都不是实际的颜色——你不能使其饱和或旋转。你必须以某种方式“着色”它，而棕褐色滤镜是唯一可以进行某种形式的着色的滤镜。
如果你的图像是纯粹的100%红色，那么就可以直接添加目标度数，并使用HSL调整饱和度和亮度以达到目标效果。对于白色起点，第一步是将其转换并定义中间颜色，以便稍后我们可以饱和和旋转它。
首先让我们变暗白色图像并应用棕褐色以获得我们可以处理的“基础”颜色：
filter: brightness(50%) sepia(1);

这将产生大约的RGB颜色值：
rgb(178, 160, 128)

第二步是将其转换为HSL颜色空间，代码如下：

convert that to HSL color-space

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>

将基础颜色转换为目标颜色

这两个步骤是静态的，其结果将在每次需要查找目标调整时被重复使用（实际值sepia在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树中形状的颜色，而不是使用过滤器。过滤器在性能方面很昂贵，特别是如果许多过滤器被链接在一起，并且它们还是页面的主要部分。它们并不受所有浏览器的支持。
6
这是一个不错的尝试，但完全误导了。 - shabunc
1
这个答案是错误的。有一个精确而优雅的解决方案可供使用。 - Ωmega
关于：“如果您的图像是纯的100％红色，那将更容易。” 它可以实现！ brightness（0）invert（30％）sepia（100％）saturate（10000％） 将使您获得 #ff0000。 - mtraceur
35
接受的答案是错误的。Hue-rotate不保留饱和度或亮度，您必须进行复杂的数学计算才能得出正确的值。更简单的方法是使用引用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>

9

唯一获得精确匹配的方法是使用SVG颜色矩阵滤镜。

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

将这些权重放入SVG <filter> 矩阵中的第一列前三行中的第五列：

<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>
<filter>必须拥有id(我使用RGB十六进制码689d94)，这样我们可以将其用作参考。
由于某些浏览器（如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>

4
1

这是一个C#中的扩展方法，可完成以下操作（感谢Ωmega提供的知识）：

public static class ColorExtensions
{
    public static string ToSvgFilter(this string value)
    {
        Color color = ColorTranslator.FromHtml(value);
        int r = Convert.ToInt16(color.R);
        int g = Convert.ToInt16(color.G);
        int b = Convert.ToInt16(color.B);

        decimal converted_r = (decimal)r / 255;
        decimal converted_g = (decimal)g / 255;
        decimal converted_b = (decimal)b / 255;

        return $"url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"{value.Replace("#", "")}\" color-interpolation-filters=\"sRGB\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 {converted_r} 0 0 0 0 {converted_g} 0 0 0 0 {converted_b} 0 0 0 1 0\"/></filter></defs></svg>{value}')";
    }
}

以下是使用方法：
    protected override async Task OnInitializedAsync()
    {
        _menuItemSvgFilter = "#f20c96".ToSvgFilter();            

        await base.OnInitializedAsync();
    }

这里是剃须刀：
<NavLink class="menu-font" href="inboundorders">
     <img src="/img/svg_icon/ICON_ORDER.svg" /> Orders
</NavLink>

我在底部的razor中添加了以下CSS：

<style type="text/css">
.menu-font img 
{
    filter: @_menuItemSvgFilter;
}
</style>
-1
如果正在使用svg，则...
您可以使用一些文本编辑器打开svg文件，将其复制并粘贴到html文件中，然后根据需要更改路径颜色。
在下面的示例代码中...我只是更改了中心环的路径颜色。 希望这可以帮助到您。 

        var imgg =document.getElementById("path");
        imgg.style="fill:#424242";
   
<html>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="imgg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px">
<g>
 <path  d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971   C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/>
 <path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971   c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/>
 <path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971   c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/>
 <path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971   c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/>
 <path id="path" d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559   c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559   C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821   c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822   c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    
    
</body>
</html>

关于背景图片

        var myimg='url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px"><g><path  d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971   C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/><path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971   c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/><path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971   c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/><path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971   c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/><path d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559   c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559   C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821   c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822   c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg> \')';
        
        document.getElementById("mydiv").style.backgroundImage =myimg ;  
        
        
        
        //changing color according to theme .. new theme color :#424242
        myimg=myimg.replace(/#91DC5A/g,"#424242");
       document.getElementById("mydiv").style.backgroundImage =myimg ; 
             div {

  background-size:5em;
  width:5em;
  height:5em;
  
}
<html>
<body>

    
    <div id="mydiv"></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>
   
  
    
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接