如何仅使用 CSS 过滤器将黑色转换为任何给定颜色

IT技术 javascript css math algebra css-filters
2021-01-29 04:11:13

我的问题是:给定目标 RGB 颜色,#000仅使用CSS 过滤器将黑色 ( )重新着色为该颜色的公式是什么

为了让答案被接受,它需要提供一个函数(任何语言),该函数将接受目标颜色作为参数并返回相应的 CSSfilter字符串。

这样做的背景是需要在background-image. 在这种情况下,是为了支持 KaTeX 中的某些 TeX 数学功能:https : //github.com/Khan/KaTeX/issues/587

例子

如果目标颜色是#ffff00(黄色),一种正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

演示

非目标

  • animation。
  • 非 CSS 过滤器解决方案。
  • 从黑色以外的颜色开始。
  • 关心除黑色以外的颜色会发生什么。

到目前为止的结果

  • 强力搜索固定过滤器列表的参数:https
    ://stackoverflow.com/a/43959856/181228 缺点:效率低下,仅生成 16,777,216 种可能颜色中的一些(676,248 种颜色hueRotateStep=1)。

  • 使用SPSA 的更快搜索解决方案https: //stackoverflow.com/a/43960991/181228 获得赏金

  • 一个drop-shadow解决方案: https://stackoverflow.com/a/43959853/181228
    缺点:不工作的边缘。需要非filterCSS 更改和轻微的 HTML 更改。

您仍然可以通过提交非暴力解决方案来获得已接受的答案!

资源

  • 如何计算hue-rotatesepia计算:https : //stackoverflow.com/a/29521147/181228 Ruby 实现示例:

    LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
    HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = 0.2830
    
    def clamp(num)
      [0, [255, num].min].max.round
    end
    
    def hue_rotate(r, g, b, angle)
      angle = (angle % 360 + 360) % 360
      cos = Math.cos(angle * Math::PI / 180)
      sin = Math.sin(angle * Math::PI / 180)
      [clamp(
         r * ( LUM_R  +  (1 - LUM_R) * cos  -  LUM_R * sin       ) +
         g * ( LUM_G  -  LUM_G * cos        -  LUM_G * sin       ) +
         b * ( LUM_B  -  LUM_B * cos        +  (1 - LUM_B) * sin )),
       clamp(
         r * ( LUM_R  -  LUM_R * cos        +  HUE_R * sin       ) +
         g * ( LUM_G  +  (1 - LUM_G) * cos  +  HUE_G * sin       ) +
         b * ( LUM_B  -  LUM_B * cos        -  HUE_B * sin       )),
       clamp(
         r * ( LUM_R  -  LUM_R * cos        -  (1 - LUM_R) * sin ) +
         g * ( LUM_G  -  LUM_G * cos        +  LUM_G * sin       ) +
         b * ( LUM_B  +  (1 - LUM_B) * cos  +  LUM_B * sin       ))]
    end
    
    def sepia(r, g, b)
      [r * 0.393 + g * 0.769 + b * 0.189,
       r * 0.349 + g * 0.686 + b * 0.168,
       r * 0.272 + g * 0.534 + b * 0.131]
    end
    

    请注意,clamp以上使hue-rotate函数非线性。

    浏览器实现:ChromiumFirefox

  • 演示:从灰度颜色获取非灰度颜色:https : //stackoverflow.com/a/25524145/181228

  • 几乎有效的公式(来自类似问题):https :
    //stackoverflow.com/a/29958459/181228

    上面公式错误的详细解释(CSShue-rotate不是真正的色调旋转而是线性近似):https :
    //stackoverflow.com/a/19325417/2441511

6个回答

@Dave 是第一个对此问题发布答案的人(使用工作代码),他的回答是无耻的复制和粘贴灵感的宝贵来源这篇文章最初是为了解释和完善@Dave 的答案,但后来演变成了自己的答案。

我的方法要快得多。根据随机生成的 RGB 颜色jsPerf 基准测试,@Dave 的算法在600 ms 内运行,而我的在30 ms 内运行这肯定很重要,例如在加载时间,速度至关重要。

此外,对于某些颜色,我的算法表现更好:

  • 对于rgb(0,255,0),@Dave 的产品rgb(29,218,34)和我的产品rgb(1,255,0)
  • 对于rgb(0,0,255),@Dave 的产品rgb(37,39,255)和我的产品rgb(5,6,255)
  • 对于rgb(19,11,118),@Dave 的产品rgb(36,27,102)和我的产品rgb(20,11,112)

演示

"use strict";

class Color {
    constructor(r, g, b) { this.set(r, g, b); }
    toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; }

    set(r, g, b) {
        this.r = this.clamp(r);
        this.g = this.clamp(g);
        this.b = this.clamp(b);
    }

    hueRotate(angle = 0) {
        angle = angle / 180 * Math.PI;
        let sin = Math.sin(angle);
        let cos = Math.cos(angle);

        this.multiply([
            0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928,
            0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283,
            0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072
        ]);
    }

    grayscale(value = 1) {
        this.multiply([
            0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value),
            0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value),
            0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value)
        ]);
    }

    sepia(value = 1) {
        this.multiply([
            0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value),
            0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value),
            0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value)
        ]);
    }

    saturate(value = 1) {
        this.multiply([
            0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value,
            0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value,
            0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value
        ]);
    }

    multiply(matrix) {
        let newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
        let newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
        let newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
        this.r = newR; this.g = newG; this.b = newB;
    }

    brightness(value = 1) { this.linear(value); }
    contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); }

    linear(slope = 1, intercept = 0) {
        this.r = this.clamp(this.r * slope + intercept * 255);
        this.g = this.clamp(this.g * slope + intercept * 255);
        this.b = this.clamp(this.b * slope + intercept * 255);
    }

    invert(value = 1) {
        this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
        this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
        this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
    }

    hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
        let r = this.r / 255;
        let g = this.g / 255;
        let b = this.b / 255;
        let max = Math.max(r, g, b);
        let min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if(max === min) {
            h = s = 0;
        } else {
            let d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            } h /= 6;
        }

        return {
            h: h * 100,
            s: s * 100,
            l: l * 100
        };
    }

    clamp(value) {
        if(value > 255) { value = 255; }
        else if(value < 0) { value = 0; }
        return value;
    }
}

class Solver {
    constructor(target) {
        this.target = target;
        this.targetHSL = target.hsl();
        this.reusedColor = new Color(0, 0, 0); // Object pool
    }

    solve() {
        let result = this.solveNarrow(this.solveWide());
        return {
            values: result.values,
            loss: result.loss,
            filter: this.css(result.values)
        };
    }

    solveWide() {
        const A = 5;
        const c = 15;
        const a = [60, 180, 18000, 600, 1.2, 1.2];

        let best = { loss: Infinity };
        for(let i = 0; best.loss > 25 && i < 3; i++) {
            let initial = [50, 20, 3750, 50, 100, 100];
            let result = this.spsa(A, a, c, initial, 1000);
            if(result.loss < best.loss) { best = result; }
        } return best;
    }

    solveNarrow(wide) {
        const A = wide.loss;
        const c = 2;
        const A1 = A + 1;
        const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
        return this.spsa(A, a, c, wide.values, 500);
    }

    spsa(A, a, c, values, iters) {
        const alpha = 1;
        const gamma = 0.16666666666666666;

        let best = null;
        let bestLoss = Infinity;
        let deltas = new Array(6);
        let highArgs = new Array(6);
        let lowArgs = new Array(6);

        for(let k = 0; k < iters; k++) {
            let ck = c / Math.pow(k + 1, gamma);
            for(let i = 0; i < 6; i++) {
                deltas[i] = Math.random() > 0.5 ? 1 : -1;
                highArgs[i] = values[i] + ck * deltas[i];
                lowArgs[i]  = values[i] - ck * deltas[i];
            }

            let lossDiff = this.loss(highArgs) - this.loss(lowArgs);
            for(let i = 0; i < 6; i++) {
                let g = lossDiff / (2 * ck) * deltas[i];
                let ak = a[i] / Math.pow(A + k + 1, alpha);
                values[i] = fix(values[i] - ak * g, i);
            }

            let loss = this.loss(values);
            if(loss < bestLoss) { best = values.slice(0); bestLoss = loss; }
        } return { values: best, loss: bestLoss };

        function fix(value, idx) {
            let max = 100;
            if(idx === 2 /* saturate */) { max = 7500; }
            else if(idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; }

            if(idx === 3 /* hue-rotate */) {
                if(value > max) { value = value % max; }
                else if(value < 0) { value = max + value % max; }
            } else if(value < 0) { value = 0; }
            else if(value > max) { value = max; }
            return value;
        }
    }

    loss(filters) { // Argument is array of percentages.
        let color = this.reusedColor;
        color.set(0, 0, 0);

        color.invert(filters[0] / 100);
        color.sepia(filters[1] / 100);
        color.saturate(filters[2] / 100);
        color.hueRotate(filters[3] * 3.6);
        color.brightness(filters[4] / 100);
        color.contrast(filters[5] / 100);

        let colorHSL = color.hsl();
        return Math.abs(color.r - this.target.r)
            + Math.abs(color.g - this.target.g)
            + Math.abs(color.b - this.target.b)
            + Math.abs(colorHSL.h - this.targetHSL.h)
            + Math.abs(colorHSL.s - this.targetHSL.s)
            + Math.abs(colorHSL.l - this.targetHSL.l);
    }

    css(filters) {
        function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); }
        return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`;
    }
}

$("button.execute").click(() => {
    let rgb = $("input.target").val().split(",");
    if (rgb.length !== 3) { alert("Invalid format!"); return; }

    let color = new Color(rgb[0], rgb[1], rgb[2]);
    let solver = new Solver(color);
    let result = solver.solve();

    let lossMsg;
    if (result.loss < 1) {
        lossMsg = "This is a perfect result.";
    } else if (result.loss < 5) {
        lossMsg = "The is close enough.";
    } else if(result.loss < 15) {
        lossMsg = "The color is somewhat off. Consider running it again.";
    } else {
        lossMsg = "The color is extremely off. Run it again!";
    }

    $(".realPixel").css("background-color", color.toString());
    $(".filterPixel").attr("style", result.filter);
    $(".filterDetail").text(result.filter);
    $(".lossDetail").html(`Loss: ${result.loss.toFixed(1)}. <b>${lossMsg}</b>`);
});
.pixel {
    display: inline-block;
    background-color: #000;
    width: 50px;
    height: 50px;
}

.filterDetail {
    font-family: "Consolas", "Menlo", "Ubuntu Mono", monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="target" type="text" placeholder="r, g, b" value="250, 150, 50" />
<button class="execute">Compute Filters</button>

<p>Real pixel, color applied through CSS <code>background-color</code>:</p>
<div class="pixel realPixel"></div>

<p>Filtered pixel, color applied through CSS <code>filter</code>:</p>
<div class="pixel filterPixel"></div>

<p class="filterDetail"></p>
<p class="lossDetail"></p>


用法

let color = new Color(0, 255, 0);
let solver = new Solver(color);
let result = solver.solve();
let filterCSS = result.css;

解释

我们将从一些 Javascript 开始。

"use strict";

class Color {
    constructor(r, g, b) {
        this.r = this.clamp(r);
        this.g = this.clamp(g);
        this.b = this.clamp(b);
    } toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; }

    hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
        let r = this.r / 255;
        let g = this.g / 255;
        let b = this.b / 255;
        let max = Math.max(r, g, b);
        let min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if(max === min) {
            h = s = 0;
        } else {
            let d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            } h /= 6;
        }

        return {
            h: h * 100,
            s: s * 100,
            l: l * 100
        };
    }

    clamp(value) {
        if(value > 255) { value = 255; }
        else if(value < 0) { value = 0; }
        return value;
    }
}

class Solver {
    constructor(target) {
        this.target = target;
        this.targetHSL = target.hsl();
    }

    css(filters) {
        function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); }
        return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`;
    }
}

解释:

  • Color类代表一个RGB色彩。
    • 它的toString()函数返回 CSSrgb(...)颜色字符串中的颜色。
    • 它的hsl()函数返回颜色,转换为HSL
    • 它的clamp()功能确保给定的颜色值在范围内 (0-255)。
  • Solver课程将尝试求解目标颜色。
    • 它的css()函数在 CSS 过滤器字符串中返回给定的过滤器。

实施grayscale(), sepia(), 和saturate()

CSS/SVG 过滤器的核心是过滤器基元,它表示对图像的低级修改。

过滤器grayscale()sepia()saturate()由过滤器原语实现<feColorMatrix>,它在过滤器指定的矩阵(通常是动态生成的)和从颜色创建的矩阵之间执行矩阵乘法图表:

矩阵乘法

我们可以在这里进行一些优化:

  • 颜色矩阵的最后一个元素是并且永远是1没有必要计算或存储它。
  • 也没有必要计算或存储 alpha/透明度值 ( A),因为我们处理的是 RGB,而不是 RGBA。
  • 因此,我们可以将过滤器矩阵从 5x5 修剪到 3x5,将颜色矩阵从 1x5 修剪到 1x3这可以节省一些工作。
  • 所有<feColorMatrix>过滤器都将第 4 列和第 5 列留为零。因此,我们可以进一步将滤波器矩阵减少到 3x3
  • 由于乘法相对简单,因此无需为此拖入复杂的数学库我们可以自己实现矩阵乘法算法。

执行:

function multiply(matrix) {
    let newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
    let newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
    let newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
    this.r = newR; this.g = newG; this.b = newB;
}

(我们使用临时变量来保存每行乘法的结果,因为我们不希望对this.r等的更改影响后续计算。)

现在我们已经实现了<feColorMatrix>,我们可以实现grayscale(), sepia(), 和saturate(),它简单地使用给定的过滤器矩阵调用它:

function grayscale(value = 1) {
    this.multiply([
        0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value),
        0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value),
        0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value)
    ]);
}

function sepia(value = 1) {
    this.multiply([
        0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value),
        0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value),
        0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value)
    ]);
}

function saturate(value = 1) {
    this.multiply([
        0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value,
        0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value,
        0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value
    ]);
}

实施 hue-rotate()

hue-rotate()过滤器是通过实施<feColorMatrix type="hueRotate" />

过滤矩阵计算如下:

例如,元素a 00 的计算方式如下:

笔记:

  • 旋转角度以度为单位,在传递给Math.sin()之前必须将其转换为弧度Math.cos()
  • Math.sin(angle)并且Math.cos(angle)应该计算一次然后缓存。

执行:

function hueRotate(angle = 0) {
    angle = angle / 180 * Math.PI;
    let sin = Math.sin(angle);
    let cos = Math.cos(angle);

    this.multiply([
        0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928,
        0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283,
        0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072
    ]);
}

实施brightness()contrast()

brightness()contrast()过滤器由实现<feComponentTransfer><feFuncX type="linear" />

每个<feFuncX type="linear" />元素都接受一个斜率截距属性。然后它通过一个简单的公式计算每个新的颜色值:

value = slope * value + intercept

这很容易实现:

function linear(slope = 1, intercept = 0) {
    this.r = this.clamp(this.r * slope + intercept * 255);
    this.g = this.clamp(this.g * slope + intercept * 255);
    this.b = this.clamp(this.b * slope + intercept * 255);
}

一旦实现,brightness()并且contrast()可以实现为好:

function brightness(value = 1) { this.linear(value); }
function contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); }

实施 invert()

invert()过滤器是通过实现<feComponentTransfer><feFuncX type="table" />

规范指出:

下文中,C为初始分量,C'为重映射分量;都在闭区间 [0,1] 内。

对于“表”,该函数由属性tableValues 中给定值之间的线性插值定义该表具有n + 1 个值(即 v 0到 v n),指定了n 个大小均匀的插值区域的开始和结束值插值使用以下公式:

对于值C找到k使得:

k / n ≤ C < (k + 1) / n

结果C'由下式给出:

C' = v k + (C - k / n) * n * (v k+1 - v k )

这个公式的解释:

  • 所述invert()过滤器定义该表:[数值,1 -值]。这是tableValuesv
  • 该公式定义了n,因此n + 1 是表格的长度。由于表的长度为 2,因此n = 1。
  • 该公式定义了k,其中kk + 1 是表的索引。由于该表有 2 个元素,因此k = 0。

因此,我们可以将公式简化为:

C' = v 0 + C * (v 1 - v 0 )

内联表的值,我们剩下:

C' = 值 + C * (1 - 值 - 值)

还有一种简化:

C' = 值 + C * (1 - 2 * 值)

该规范将CC'定义为 RGB 值,在 0-1 范围内(而不是 0-255)。因此,我们必须在计算之前缩小这些值,然后再将它们放大。

因此,我们到达了我们的实现:

function invert(value = 1) {
    this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
    this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
    this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
}

插曲:@Dave 的蛮力算法

@Dave的代码生成176,660 个过滤器组合,包括:

  • 11 个invert()过滤器(0%、10%、20%、...、100%)
  • 11 个sepia()过滤器(0%、10%、20%、...、100%)
  • 20 个saturate()过滤器(5%、10%、15%、...、100%)
  • 73 个hue-rotate()过滤器(0 度、5 度、10 度、...、360 度)

它按以下顺序计算过滤器:

filter: invert(a%) sepia(b%) saturate(c%) hue-rotate(θdeg);

然后它遍历所有计算出的颜色。一旦发现生成的颜色在容差范围内(所有 RGB 值都在目标颜色的 5 个单位内),它就会停止。

然而,这是缓慢且低效的。因此,我提出了我自己的答案。

实施 SPSA

首先,我们必须定义一个损失函数,它返回过滤器组合产生的颜色与目标颜色之间的差异。如果过滤器是完美的,损失函数应该返回 0。

我们将测量色差作为两个指标的总和:

  • RGB 差异,因为目标是产生最接近的 RGB 值。
  • HSL 差异,因为许多 HSL 值对应于过滤器(例如,色调与 大致相关hue-rotate(),饱和度与 相关saturate(),等等)。这指导了算法。

损失函数将采用一个参数——一组过滤器百分比。

我们将使用以下过滤顺序:

filter: invert(a%) sepia(b%) saturate(c%) hue-rotate(θdeg) brightness(e%) contrast(f%);

执行:

function loss(filters) {
    let color = new Color(0, 0, 0);
    color.invert(filters[0] / 100);
    color.sepia(filters[1] / 100);
    color.saturate(filters[2] / 100);
    color.hueRotate(filters[3] * 3.6);
    color.brightness(filters[4] / 100);
    color.contrast(filters[5] / 100);

    let colorHSL = color.hsl();
    return Math.abs(color.r - this.target.r)
        + Math.abs(color.g - this.target.g)
        + Math.abs(color.b - this.target.b)
        + Math.abs(colorHSL.h - this.targetHSL.h)
        + Math.abs(colorHSL.s - this.targetHSL.s)
        + Math.abs(colorHSL.l - this.targetHSL.l);
}

我们将尝试最小化损失函数,使得:

loss([a, b, c, d, e, f]) = 0

SPSA算法(网站更多的信息实现纸张参考代码)是在这个非常好。它旨在优化具有局部最小值、噪声/非线性/多元损失函数等的复杂系统。它已用于调整国际象棋引擎与许多其他算法不同,描述它的论文实际上是可以理解的(尽管需要付出很大的努力)。

执行:

function spsa(A, a, c, values, iters) {
    const alpha = 1;
    const gamma = 0.16666666666666666;

    let best = null;
    let bestLoss = Infinity;
    let deltas = new Array(6);
    let highArgs = new Array(6);
    let lowArgs = new Array(6);

    for(let k = 0; k < iters; k++) {
        let ck = c / Math.pow(k + 1, gamma);
        for(let i = 0; i < 6; i++) {
            deltas[i] = Math.random() > 0.5 ? 1 : -1;
            highArgs[i] = values[i] + ck * deltas[i];
            lowArgs[i]  = values[i] - ck * deltas[i];
        }

        let lossDiff = this.loss(highArgs) - this.loss(lowArgs);
        for(let i = 0; i < 6; i++) {
            let g = lossDiff / (2 * ck) * deltas[i];
            let ak = a[i] / Math.pow(A + k + 1, alpha);
            values[i] = fix(values[i] - ak * g, i);
        }

        let loss = this.loss(values);
        if(loss < bestLoss) { best = values.slice(0); bestLoss = loss; }
    } return { values: best, loss: bestLoss };

    function fix(value, idx) {
        let max = 100;
        if(idx === 2 /* saturate */) { max = 7500; }
        else if(idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; }

        if(idx === 3 /* hue-rotate */) {
            if(value > max) { value = value % max; }
            else if(value < 0) { value = max + value % max; }
        } else if(value < 0) { value = 0; }
        else if(value > max) { value = max; }
        return value;
    }
}

我对 SPSA 进行了一些修改/优化:

  • 使用产生的最佳结果,而不是最后一个。
  • 重用所有数组 ( deltas, highArgs, lowArgs),而不是在每次迭代时重新创建它们。
  • a使用一组值,而不是单个值。这是因为所有滤波器都不同,因此它们应该以不同的速度移动/收敛。
  • fix每次迭代后运行一个函数。它将所有值限制在 0% 和 100% 之间,除了saturate(最大值为 7500%)brightnesscontrast(最大值为 200%)和hueRotate(值被环绕而不是被限制)。

我在两阶段过程中使用 SPSA:

  1. “宽”阶段,试图“探索”搜索空间。如果结果不令人满意,它将对 SPSA 进行有限的重试。
  2. “窄”舞台,从宽舞台中取最好的结果,并试图“细化”它。它使用Aa 的动态值

执行:

function solve() {
    let result = this.solveNarrow(this.solveWide());
    return {
        values: result.values,
        loss: result.loss,
        filter: this.css(result.values)
    };
}

function solveWide() {
    const A = 5;
    const c = 15;
    const a = [60, 180, 18000, 600, 1.2, 1.2];

    let best = { loss: Infinity };
    for(let i = 0; best.loss > 25 && i < 3; i++) {
        let initial = [50, 20, 3750, 50, 100, 100];
        let result = this.spsa(A, a, c, initial, 1000);
        if(result.loss < best.loss) { best = result; }
    } return best;
}

function solveNarrow(wide) {
    const A = wide.loss;
    const c = 2;
    const A1 = A + 1;
    const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
    return this.spsa(A, a, c, wide.values, 500);
}

调整 SPSA

警告:不要弄乱 SPSA 代码,尤其是它的常量,除非您确定自己知道自己在做什么。

重要的常量是Aac、初始值、重试阈值、maxin的值fix()以及每个阶段的迭代次数。所有这些值都经过仔细调整以产生良好的结果,并且随机使用它们几乎肯定会降低算法的实用性。

如果你坚持要改变它,你必须在“优化”之前进行测量。

首先,应用这个补丁

然后在 Node.js 中运行代码。一段时间后,结果应该是这样的:

Average loss: 3.4768521401985275
Average time: 11.4915ms

现在将常量调整到您满意的程度。

一些技巧:

  • 平均损失应该在 4 左右。如果它大于 4,则产生的结果相差太远,您应该调整精度。如果小于4,就是浪费时间,应该减少迭代次数。
  • 如果增加/减少迭代次数,请适当调整A。
  • 如果增加/减少A,请适当调整a
  • --debug如果您想查看每次迭代的结果,请使用该标志。

TL; 博士

非常好的开发过程总结!你在读我的想法吗?!
2021-03-24 04:11:13
@MichaelMullany 好吧,考虑到我在这方面工作了多长时间,这让我很尴尬。我没有想到你的方法,但现在我明白了——要将一个元素重新着色为任何任意颜色,你只需动态生成一个 SVG,其中<filter>包含<feColorMatrix>具有适当值的 a(除最后一列外全为零,其中包含目标 RGB值,0 和 1),将 SVG 插入到 DOM 中,并从 CSS 中引用过滤器。请写下您的解决方案作为答案(带有演示),我会赞成。
2021-03-25 04:11:13
2021-03-26 04:11:13
很棒的答案。
2021-03-29 04:11:13
这是一种完全疯狂的方法。您可以直接使用 SVG 过滤器(feColorMatrix 中的第五列)设置颜色,并且您可以从 CSS 中引用该过滤器 - 为什么不使用该方法?
2021-04-11 04:11:13

这是一次穿越兔子洞的旅行,但它来了!

var tolerance = 1;
var invertRange = [0, 1];
var invertStep = 0.1;
var sepiaRange = [0, 1];
var sepiaStep = 0.1;
var saturateRange = [5, 100];
var saturateStep = 5;
var hueRotateRange = [0, 360];
var hueRotateStep = 5;
var possibleColors;
var color = document.getElementById('color');
var pixel = document.getElementById('pixel');
var filtersBox = document.getElementById('filters');
var button = document.getElementById('button');
button.addEventListener('click', function() { 			      
	getNewColor(color.value);
})

// matrices taken from https://www.w3.org/TR/filter-effects/#feColorMatrixElement
function sepiaMatrix(s) {
	return [
		(0.393 + 0.607 * (1 - s)), (0.769 - 0.769 * (1 - s)), (0.189 - 0.189 * (1 - s)),
		(0.349 - 0.349 * (1 - s)), (0.686 + 0.314 * (1 - s)), (0.168 - 0.168 * (1 - s)),
		(0.272 - 0.272 * (1 - s)), (0.534 - 0.534 * (1 - s)), (0.131 + 0.869 * (1 - s)),
	]
}

function saturateMatrix(s) {
	return [
		0.213+0.787*s, 0.715-0.715*s, 0.072-0.072*s,
		0.213-0.213*s, 0.715+0.285*s, 0.072-0.072*s,
		0.213-0.213*s, 0.715-0.715*s, 0.072+0.928*s,
	]
}

function hueRotateMatrix(d) {
	var cos = Math.cos(d * Math.PI / 180);
	var sin = Math.sin(d * Math.PI / 180);
	var a00 = 0.213 + cos*0.787 - sin*0.213;
	var a01 = 0.715 - cos*0.715 - sin*0.715;
	var a02 = 0.072 - cos*0.072 + sin*0.928;

	var a10 = 0.213 - cos*0.213 + sin*0.143;
	var a11 = 0.715 + cos*0.285 + sin*0.140;
	var a12 = 0.072 - cos*0.072 - sin*0.283;

	var a20 = 0.213 - cos*0.213 - sin*0.787;
	var a21 = 0.715 - cos*0.715 + sin*0.715;
	var a22 = 0.072 + cos*0.928 + sin*0.072;

	return [
		a00, a01, a02,
		a10, a11, a12,
		a20, a21, a22,
	]
}

function clamp(value) {
	return value > 255 ? 255 : value < 0 ? 0 : value;
}

function filter(m, c) {
	return [
		clamp(m[0]*c[0] + m[1]*c[1] + m[2]*c[2]),
		clamp(m[3]*c[0] + m[4]*c[1] + m[5]*c[2]),
		clamp(m[6]*c[0] + m[7]*c[1] + m[8]*c[2]),
	]
}

function invertBlack(i) {
	return [
		i * 255,
		i * 255,
		i * 255,
	]
}

function generateColors() {
	let possibleColors = [];

	let invert = invertRange[0];
	for (invert; invert <= invertRange[1]; invert+=invertStep) {
		let sepia = sepiaRange[0];
		for (sepia; sepia <= sepiaRange[1]; sepia+=sepiaStep) {
			let saturate = saturateRange[0];
			for (saturate; saturate <= saturateRange[1]; saturate+=saturateStep) {
				let hueRotate = hueRotateRange[0];
				for (hueRotate; hueRotate <= hueRotateRange[1]; hueRotate+=hueRotateStep) {
					let invertColor = invertBlack(invert);
					let sepiaColor = filter(sepiaMatrix(sepia), invertColor);
					let saturateColor = filter(saturateMatrix(saturate), sepiaColor);
					let hueRotateColor = filter(hueRotateMatrix(hueRotate), saturateColor);

					let colorObject = {
						filters: { invert, sepia, saturate, hueRotate },
						color: hueRotateColor
					}

					possibleColors.push(colorObject);
				}
			}
		}
	}

	return possibleColors;
}

function getFilters(targetColor, localTolerance) {
	possibleColors = possibleColors || generateColors();

	for (var i = 0; i < possibleColors.length; i++) {
		var color = possibleColors[i].color;
		if (
			Math.abs(color[0] - targetColor[0]) < localTolerance &&
			Math.abs(color[1] - targetColor[1]) < localTolerance &&
			Math.abs(color[2] - targetColor[2]) < localTolerance
		) {
			return filters = possibleColors[i].filters;
			break;
		}
	}

	localTolerance += tolerance;
	return getFilters(targetColor, localTolerance)
}

function getNewColor(color) {
	var targetColor = color.split(',');
	targetColor = [
	    parseInt(targetColor[0]), // [R]
	    parseInt(targetColor[1]), // [G]
	    parseInt(targetColor[2]), // [B]
    ]
    var filters = getFilters(targetColor, tolerance);
    var filtersCSS = 'filter: ' +
	    'invert('+Math.floor(filters.invert*100)+'%) '+
	    'sepia('+Math.floor(filters.sepia*100)+'%) ' +
	    'saturate('+Math.floor(filters.saturate*100)+'%) ' +
	    'hue-rotate('+Math.floor(filters.hueRotate)+'deg);';
    pixel.style = filtersCSS;
    filtersBox.innerText = filtersCSS
}

getNewColor(color.value);
#pixel {
  width: 50px;
  height: 50px;
  background: rgb(0,0,0);
}
<input type="text" id="color" placeholder="R,G,B" value="250,150,50" />
<button id="button">get filters</button>
<div id="pixel"></div>
<div id="filters"></div>

编辑:此解决方案不适用于生产用途,仅说明了一种可以用来实现 OP 要求的方法。照原样,它在色谱的某些区域很弱。更好的结果可以通过步骤迭代中的更多粒度或由于@MultiplyByZer0's answer中详细描述的原因实现更多过滤器功能来实现

EDIT2: OP 正在寻找非蛮力解决方案。在那种情况下,它非常简单,只需解这个方程:

CSS 过滤矩阵方程

在哪里

a = hue-rotation
b = saturation
c = sepia
d = invert
我认为上面的等式也丢失了clamp
2021-03-14 04:11:13
这个等式绝不是“非常简单”
2021-03-23 04:11:13
如果我输入255,0,255,我的数字色度计会报告结果#d619d9而不是#ff00ff
2021-03-28 04:11:13
夹子在那里没有位置。根据我在大学数学中的记忆,这些方程是通过数值计算(又名“蛮力”)计算出来的,祝你好运!
2021-04-01 04:11:13
@Siguza 这绝对不是完美的,可以通过调整循环中的边界来调整边缘颜色。
2021-04-04 04:11:13

注意: OP 要求我取消删除,但赏金将交给戴夫的回答。


我知道这不是问题正文中提出的问题,当然也不是我们一直在等待的问题,但是有一个 CSS 过滤器可以做到这一点: drop-shadow()

注意事项:

  • 阴影绘制在现有内容的后面。这意味着我们必须做出一些绝对定位技巧。
  • 所有像素都将被同等对待,但 OP 说 [我们不应该] “关心黑色以外的颜色会发生什么。”
  • 浏览器支持。(我不确定,仅在最新的 FF 和 chrome 下测试)。

/* the container used to hide the original bg */

.icon {
  width: 60px;
  height: 60px;
  overflow: hidden;
}


/* the content */

.icon.green>span {
  -webkit-filter: drop-shadow(60px 0px green);
  filter: drop-shadow(60px 0px green);
}

.icon.red>span {
  -webkit-filter: drop-shadow(60px 0px red);
  filter: drop-shadow(60px 0px red);
}

.icon>span {
  -webkit-filter: drop-shadow(60px 0px black);
  filter: drop-shadow(60px 0px black);
  background-position: -100% 0;
  margin-left: -60px;
  display: block;
  width: 61px; /* +1px for chrome bug...*/
  height: 60px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTAgOTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwIDkwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYxLjUxMSwyNi4xNWMtMC43MTQtMS43MzgtMS43MjMtMy4yOTgtMy4wMjYtNC42NzkgICBjLTEuMzAzLTEuMzY2LTIuODA5LTIuNDUyLTQuNTE1LTMuMjU5Yy0xLjc1NC0wLjgyMi0zLjYwMS0xLjI4OC01LjU0LTEuMzk2Yy0wLjI4LTAuMDMxLTAuNTUyLTAuMDQ3LTAuODE0LTAuMDQ3ICAgYy0wLjAxOCwwLTAuMDMxLDAtMC4wNDcsMGMtMC4zMjcsMC4wMTYtMC41NzQsMC4wMjMtMC43NDUsMC4wMjNjLTEuOTcxLDAuMTA4LTMuODQxLDAuNTc0LTUuNjA5LDEuMzk3ICAgYy0xLjcwOCwwLjgwNy0zLjIxMiwxLjg5My00LjUxNywzLjI1OWMtMS4zMTgsMS4zODEtMi4zMjcsMi45NDgtMy4wMjYsNC43MDJ2LTAuMDIzYy0wLjc0NCwxLjgxNS0xLjExOCwzLjcxNi0xLjExOCw1LjcwMiAgIGMtMC4wMTUsMi4wNjQsMC41MzcsNC4xODIsMS42NTQsNi4zNTVjMC41NzQsMS4xMzMsMS4yOTUsMi4yNSwyLjE2NCwzLjM1MmMwLjQ4MiwwLjYwNSwxLjAwMiwxLjIxLDEuNTYsMS44MTYgICBjMC4wMzEsMC4wMTYsMC4wNTUsMC4wMzksMC4wNzEsMC4wN2MwLjUyNywwLjQ5NiwwLjg5MiwwLjk3OCwxLjA5MywxLjQ0M2MwLjEwOCwwLjIzMywwLjE3OSwwLjUyLDAuMjEsMC44NjIgICBjMC4wNDYsMC4zNzEsMC4wNjksMC44MjIsMC4wNjksMS4zNXYxLjA0OGMwLDAuNjIsMC4xMTcsMS4yMTgsMC4zNDksMS43OTJjMC4yMzQsMC41NDMsMC41NiwxLjAyNCwwLjk3OCwxLjQ0M2gwLjAyNSAgIGMwLjQxOCwwLjQxOSwwLjg5MiwwLjc0NSwxLjQyLDAuOTc3aDAuMDIzYzAuNTU4LDAuMjQ5LDEuMTQ4LDAuMzczLDEuNzY5LDAuMzczaDcuMjg3YzAuNjIsMCwxLjIwOS0wLjEyNCwxLjc2OS0wLjM3MyAgIGMwLjU0My0wLjIzMSwxLjAyMy0wLjU1OCwxLjQ0My0wLjk3N2MwLjQxOC0wLjQxOSwwLjc0My0wLjksMC45NzgtMS40NDNjMC4yNDgtMC41NzQsMC4zNzEtMS4xNzIsMC4zNzEtMS43OTJ2LTEuMDQ4ICAgYzAtMC41MjcsMC4wMjMtMC45NzksMC4wNzEtMS4zNWMwLjAyOS0wLjM0MiwwLjA5Mi0wLjYzNywwLjE4Ni0wLjg4NWMwLjEwOC0wLjIzMywwLjI2NC0wLjQ3MywwLjQ2Ni0wLjcyMnYtMC4wMjMgICBjMC4xODctMC4yMzMsMC40MDMtMC40NjYsMC42NTEtMC42OTljMC4wMTYtMC4wMTYsMC4wMzEtMC4wMywwLjA0Ny0wLjA0NmMwLjU3NC0wLjYwNSwxLjEwMy0xLjIxLDEuNTgzLTEuODE2ICAgYzAuODY4LTEuMTAyLDEuNTkxLTIuMjE5LDIuMTY1LTMuMzUyYzEuMTE3LTIuMTczLDEuNjY3LTQuMjkxLDEuNjUyLTYuMzU1QzYyLjYwNSwyOS44NTksNjIuMjQsMjcuOTY2LDYxLjUxMSwyNi4xNXogICAgTTgxLjc4NSw0My4xNDJjMCw2Ljg3NS0xLjc1MywxMy4wMi01LjI2MSwxOC40MzZjLTEuMzgxLDIuMTQxLTMuMDMyLDQuMTY3LTQuOTU4LDYuMDc1Yy02Ljc1LDYuNzk3LTE0LjkxMywxMC4xOTUtMjQuNDg2LDEwLjE5NSAgIGMtNi40NTcsMC0xMi4yOTItMS41NDQtMTcuNTA1LTQuNjMyYy0wLjI0OSwwLjI5NS0wLjU2LDAuNTI3LTAuOTMyLDAuNjk4bC0xNi4xMzEsNy42NThjLTAuNTEyLDAuMjMzLTEuMDQ3LDAuMzAzLTEuNjA2LDAuMjEgICBjLTAuNTU5LTAuMDk0LTEuMDQtMC4zNDItMS40NDMtMC43NDVjLTAuNDA0LTAuNDAzLTAuNjUyLTAuODg2LTAuNzQ2LTEuNDQzYy0wLjA5My0wLjU2LTAuMDIzLTEuMDk0LDAuMjEtMS42MDVsNy42NTgtMTYuMjcxICAgYzAuMTQtMC4zMTEsMC4zMzQtMC41NzQsMC41ODMtMC43OTJjLTMuMTk3LTUuMjYxLTQuNzk2LTExLjE4OC00Ljc5Ni0xNy43ODRjMC05LjYyMSwzLjM3Ni0xNy44MDcsMTAuMTI1LTI0LjU1OCAgIGMwLjUyOC0wLjUyNywxLjA3MS0xLjA0LDEuNjMtMS41MzZjMi4yMDQtMS45NTYsNC41MzktMy41Nyw3LjAwNi00Ljg0MkMzNS45NDUsOS42OTIsNDEuMjYsOC40MzYsNDcuMDgsOC40MzYgICBjOS41NzMsMCwxNy43MzYsMy4zODIsMjQuNDg2LDEwLjE0OGM2LjQyNiw2LjM3OCw5LjgyNCwxNC4wMjksMTAuMTk1LDIyLjk1MkM4MS43NzgsNDIuMDYzLDgxLjc4NSw0Mi41OTksODEuNzg1LDQzLjE0MnogICAgTTUxLjM4NiwyNS4yNjZjLTAuNzE0LTAuMzI2LTEuNDU5LTAuNTEzLTIuMjM1LTAuNTU5Yy0wLjQ4LTAuMDMxLTAuODc2LTAuMjI1LTEuMTg4LTAuNTgzYy0wLjMxMS0wLjM0LTAuNDU3LTAuNzUyLTAuNDQxLTEuMjMzICAgYzAuMDMxLTAuNDY2LDAuMjI1LTAuODU0LDAuNTgyLTEuMTY1YzAuMzU3LTAuMzEsMC43NjktMC40NTcsMS4yMzQtMC40NDFjMS4yMjYsMC4wNzcsMi4zOTcsMC4zOCwzLjUxNSwwLjkwNyAgIGMxLjA2OSwwLjQ5NywyLjAxOCwxLjE3OSwyLjg0LDIuMDQ5YzAuODA3LDAuODY5LDEuNDM1LDEuODU0LDEuODg0LDIuOTU2YzAuNDY2LDEuMTMzLDAuNjk5LDIuMzIsMC42OTksMy41NjIgICBjMCwwLjQ2NS0wLjE3MSwwLjg2OS0wLjUxMiwxLjIxYy0wLjMyNSwwLjMyNi0wLjcyMiwwLjQ4OS0xLjE4OCwwLjQ4OWMtMC40OCwwLTAuODg0LTAuMTYzLTEuMjEtMC40ODkgICBjLTAuMzQyLTAuMzQxLTAuNTEzLTAuNzQ2LTAuNTEzLTEuMjFjMC0wLjc5Mi0wLjE0Ni0xLjU1Mi0wLjQ0MS0yLjI4MWMtMC4yNzktMC42OTktMC42ODMtMS4zMjctMS4yMTEtMS44ODYgICBTNTIuMDY3LDI1LjU5MSw1MS4zODYsMjUuMjY2eiBNNTcuNzg3LDM1LjM2OGMwLDAuNTEyLTAuMTg4LDAuOTU0LTAuNTYsMS4zMjZjLTAuMzU2LDAuMzU3LTAuOCwwLjUzNi0xLjMyNiwwLjUzNiAgIGMtMC41MTIsMC0wLjk0Ni0wLjE3OS0xLjMwMy0wLjUzNmMtMC4zNzQtMC4zNzItMC41Ni0wLjgxNC0wLjU2LTEuMzI2YzAtMC41MTMsMC4xODYtMC45NTYsMC41Ni0xLjMyNyAgIGMwLjM1Ni0wLjM1NywwLjc5MS0wLjUzNiwxLjMwMy0wLjUzNmMwLjUyNiwwLDAuOTcsMC4xNzgsMS4zMjYsMC41MzZDNTcuNiwzNC40MTMsNTcuNzg3LDM0Ljg1NSw1Ny43ODcsMzUuMzY4eiBNNTEuODk3LDU0LjcxMSAgIEg0My40Yy0wLjcxMiwwLTEuMzE4LDAuMjU2LTEuODE1LDAuNzY5Yy0wLjUxMiwwLjQ5Ny0wLjc2OSwxLjA5NC0wLjc2OSwxLjc5MmMwLDAuNzE0LDAuMjQ5LDEuMzE5LDAuNzQ2LDEuODE1bDAuMDIzLDAuMDI0ICAgYzAuNDk3LDAuNDk2LDEuMTAzLDAuNzQ0LDEuODE1LDAuNzQ0aDguNDk3YzAuNzE1LDAsMS4zMTgtMC4yNDgsMS44MTUtMC43NDRjMC40OTctMC41MTMsMC43NDUtMS4xMjYsMC43NDUtMS44NCAgIGMwLTAuNjk4LTAuMjQ4LTEuMjk1LTAuNzQ1LTEuNzkydi0wLjAyM0M1My4yMDEsNTQuOTU5LDUyLjU5Niw1NC43MTEsNTEuODk3LDU0LjcxMXogTTQyLjcyNiw2Mi40MzhoLTAuMDIzICAgYy0wLjQ5NywwLjQ5Ny0wLjc0NSwxLjEwMy0wLjc0NSwxLjgxNnMwLjI1NywxLjMxOCwwLjc2OSwxLjgxNWMwLjQ5NywwLjQ5NywxLjEwMiwwLjc0NSwxLjgxNiwwLjc0NWg2LjEyMiAgIGMwLjY5NywwLDEuMjk1LTAuMjQ4LDEuNzkyLTAuNzQ1aDAuMDIyYzAuNDk3LTAuNDk3LDAuNzQ2LTEuMTAyLDAuNzQ2LTEuODE1cy0wLjI0OS0xLjMxOS0wLjc0Ni0xLjgxNiAgIGMtMC41MTItMC41MTItMS4xMTctMC43NjgtMS44MTQtMC43NjhoLTYuMTIyQzQzLjgyOCw2MS42NzEsNDMuMjIzLDYxLjkyNyw0Mi43MjYsNjIuNDM4eiIvPjwvZz48L3N2Zz4=);
}
<div class="icon">
  <span></span>
</div>
<div class="icon green">
  <span></span>
</div>
<div class="icon red">
  <span></span>
</div>

添加background-color: black;.icon>span使这适用于 FF 69b。但是,不显示图标。
2021-03-16 04:11:13
不适用于 SAFARI!😔
2021-03-16 04:11:13
超级聪明,厉害!这对我有用,谢谢
2021-04-08 04:11:13
代码按原样显示空白页 (W10 FF 69b)。但是,图标没有任何问题(检查单独的 SVG)。
2021-04-09 04:11:13
我相信这是一个更好的解决方案,因为它每次都是 100% 准确的颜色。
2021-04-12 04:11:13

只需使用从 CSS 引用的 SVG 过滤器,您就可以使这一切变得非常简单。您只需要一个 feColorMatrix 即可进行重新着色。这一个重新着色为黄色。feColorMatrix 中的第五列保存单位刻度上的 RGB 目标值。(对于黄色 - 它是 1,1,0)

.icon {
  filter: url(#recolorme); 
}
<svg height="0px" width="0px">
<defs>
  #ffff00
  <filter id="recolorme" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="0 0 0 0 1
                                         0 0 0 0 1
                                         0 0 0 0 0
                                         0 0 0 1 0"/>
  </filter>
</defs>
</svg>


<img class="icon" src="https://www.nouveauelevator.com/image/black-icon/android.png">

一个有趣的解决方案,但它似乎不允许通过 CSS 控制目标颜色。
2021-03-23 04:11:13
您必须为要应用的每种颜色定义一个新过滤器。但它是完全准确的。色调旋转是一种近似值,可以剪裁某些颜色 - 这意味着您无法使用它准确地获得某些颜色 - 正如上面的答案所证明的那样。我们真正需要的是 recolor() CSS 过滤器速记。
2021-03-28 04:11:13
当您将“颜色插值过滤器”=“sRGB”添加到 feColorMatrix 时,这似乎只会为黑色源图像生成准确的 RGB 颜色。
2021-04-03 04:11:13
MultiplyByZer0 的答案计算了一系列过滤器,这些过滤器以非常高的精度实现,而无需修改 HTML。hue-rotate浏览器中的 true会很好。
2021-04-08 04:11:13
边缘 12-18 被排除,因为它们不支持url函数caniuse.com/#search=svg%20filter
2021-04-12 04:11:13

使用 svg 过滤器这个答案开始,并进行了以下修改:

来自数据 url 的 SVG 过滤器

如果您不想在标记中的某处定义SVG 过滤器,则可以改用数据 url(将RGBA替换为所需的颜色):

filter: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg">\
    <filter id="recolor" color-interpolation-filters="sRGB">\
      <feColorMatrix type="matrix" values="\
        0 0 0 0 R\
        0 0 0 0 G\
        0 0 0 0 B\
        0 0 0 A 0\
      "/>\
    </filter>\
  </svg>\
  #recolor');

灰度回退

如果上述版本不起作用,您还可以添加灰度回退。

saturatebrightness功能将任何颜色为黑色(你不必包括如果颜色已经全黑了),invert然后用所需的亮度(亮它大号)和可选,你也可以指定不透明度()。

filter: saturate(0%) brightness(0%) invert(L) opacity(A);

SCSS 混合

如果要动态指定颜色,可以使用以下 SCSS mixin:

@mixin recolor($color: #000, $opacity: 1) {
  $r: red($color) / 255;
  $g: green($color) / 255;
  $b: blue($color) / 255;
  $a: $opacity;

  // grayscale fallback if SVG from data url is not supported
  $lightness: lightness($color);
  filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);

  // color filter
  $svg-filter-id: "recolor";
  filter: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
        <feColorMatrix type="matrix" values="\
          0 0 0 0 #{$r}\
          0 0 0 0 #{$g}\
          0 0 0 0 #{$b}\
          0 0 0 #{$a} 0\
        "/>\
      </filter>\
    </svg>\
    ##{$svg-filter-id}');
}

用法示例:

.icon-green {
  @include recolor(#00fa86, 0.8);
}

好处:

  • 没有Javascript
  • 没有额外的 HTML 元素
  • 如果支持 CSS 过滤器,但 SVG 过滤器不起作用,则存在灰度回退
  • 如果你使用 mixin,用法非常简单(见上面的例子)。
  • 颜色比棕褐色技巧(纯 CSS 中的 RGBA 组件,您甚至可以在 SCSS 中使用 HEX 颜色)更具可读性和更容易修改。
  • 避免的怪异行为hue-rotate

注意事项:

  • 并非所有浏览器都支持来自数据 url(尤其是 id 哈希)的 SVG 过滤器,但它适用于当前的 Firefox 和 Chromium 浏览器(可能还有其他浏览器)。
  • 如果要动态指定颜色,则必须使用 SCSS mixin。
  • 纯 CSS 版本有点难看,如果你想要很多不同的颜色,你必须多次包含 SVG。
哦,太完美了,这正是我正在寻找的,在 SASS 中使用所有东西,非常感谢!
2021-03-15 04:11:13
@Reza 不幸的是,我认为这是不可能的,因为url()CSS 中函数不支持插值。RGB 值在编译时插入到 mixin 中,因此这可以通过 SCSS 变量实现。并且因为 CSS 变量的值在运行时可用,所以你也不能在编译时从 SCSS 获取它们的值。因此,您要么必须:从变量中获取颜色并将其插入到 url 中,无论是在编译时还是在运行时,这是不可能的。
2021-03-24 04:11:13
@ghiscoding 我很高兴它有所帮助!
2021-03-26 04:11:13
@DSz 我不知道添加 SVG 过滤器是否适用于画布(它可能,但我不知道),这里的大多数解决方案专门用于通过图像标签重新着色外部 SVG 图像。如果您的目标是为画布上的图像重新着色,您可以查看以下答案:stackoverflow.com/a/45710008/2690032
2021-03-30 04:11:13
我尝试通过画布的上下文添加它:ctx.filter='url(<codeyoudefined>)',但它不起作用,如果我记录它,它会显示 filter:'none'。它适用于其他类型的过滤器。这段代码适用于 jpeg 吗?(顺便感谢您的解决方案!)
2021-04-05 04:11:13