CSSフィルターのみを使用して黒を特定の色に変換する方法


114

私の質問は:ターゲットRGBカラーが与えられた場合、CSSフィルター#000のみを使用して黒()をそのカラーに再調整する式は何ですかですか?

回答を受け入れるには、ターゲットの色を引数として受け入れ、対応するCSS filter文字列を返す関数を(任意の言語で)提供する必要があります。

このコンテキストは、内のSVGの色を変更する必要があることbackground-imageです。この場合、KaTeXで特定のTeX数学機能をサポートすることです:https : //github.com/Khan/KaTeX/issues/587

ターゲットの色が#ffff00(黄色)の場合、正しい解決策は次のとおりです。

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

デモ

非目標

  • アニメーション。
  • 非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-rotateしてsepia計算されます。 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

    上記の式が間違っている理由の詳細な説明(CSS hue-rotateは真の色相回転ではなく線形近似です):https :
    //stackoverflow.com/a/19325417/2441511


したがって、#000000から#RRGGBBをLERPしたいですか?(明確化)
Zze

1
そうですね。移行をソリューションに組み込みたくないことを明確にしただけです。
Zze

1
ブレンドモードがあなたのために働くかもしれませんか?簡単に黒を任意の色に変換できます...しかし、私はあなたが達成したいものの全体像を理解できません
vals

1
@glebmしたがって、黒を任意の色に変換し、cssを使用して適用するための式を(任意の方法を使用して)見つける必要がありますか?
ProllyGeek 2017年

2
@ProllyGeekはい。私が言及しなければならないもう1つの制約は、結果の式が5GiBテーブルのブルートフォースルックアップであってはならないことです(たとえば、WebページのJavaScriptから使用できるはずです)。
glebm 2017年

回答:


148

@Daveはこれに(動作するコードを使用して)最初に回答を投稿し彼の回答は恥知らずなコピーと貼り付けの非常に貴重な情報源でしたインスピレーションのた。この投稿は、@ Daveの回答を説明および改善するための試みとして始まりましたが、その後、独自の回答に発展しました。

私の方法は大幅に高速です。によるとランダムに生成されたRGBカラーのjsPerfベンチマークに、@ Daveのアルゴリズムは600ミリ秒で実行され、鉱山は30ミリ秒で実行されます。これは、例えば、速度が重要であるロード時間など、間違いなく問題になる可能性があります。

さらに、一部の色については、私のアルゴリズムのパフォーマンスが向上しています。

  • の場合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()関数は、CSS rgb(...)カラー文字列で色を返します。
    • そのhsl()関数は、HSLに変換された色を返します。
    • そのclamp()機能は、指定された色の値が範囲(0〜255)内にあることを保証します。
  • Solverクラスは、ターゲット色の解決しようとします。
    • そのcss()関数は、CSSフィルター文字列で指定されたフィルターを返します。

実装grayscale()sepia()およびsaturate()

CSS / SVGフィルターの中心は フィルタープリミティブであり、画像に対する低レベルの変更を表します。

フィルタgrayscale()sepia()、及びはsaturate()フィルタプリミティブによって実装されている<feColorMatrix>行い、行列乗算行列の間にはフィルタ(多くの場合、動的に生成された)、および色から作成された行列で指定されました。図:

行列の乗算

ここでは、いくつかの最適化を行うことができます。

  • カラーマトリックスの最後の要素はであり、常にになります1。計算したり保存したりする意味はありません。
  • ARGBAではなくRGBを扱っているため、アルファ/透明度の値()を計算または保存する意味もありません。
  • したがって、フィルターマトリックスを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 -値]。これはtableValuesまたはvですです。
  • 式定義Nように、N + 1は、テーブルの長さです。テーブルの長さは2 なので、n = 1です。
  • 式を定義Kを用いて、K及びK + 1がテーブルのインデックスです。テーブルには2つの要素があるため、k = 0です。

したがって、式を次のように簡略化できます。

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

テーブルの値をインライン化すると、次のようになります。

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

もう1つの簡略化:

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

仕様では、CおよびC 'を0〜255の範囲ではなく0〜1の範囲内のRGB値として定義しています。結果として、計算前に値を縮小し、後で拡大する必要があります。

したがって、実装に到達します。

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-rotatedeg);

次に、計算されたすべての色を反復処理します。生成された色が許容範囲内であることが検出されると停止します(すべてのRGB値はターゲット色から5単位以内です)。

ただし、これは遅く、非効率的です。したがって、私は自分の答えを提示します。

SPSAの実装

最初に、フィルターの組み合わせによって生成された色とターゲットの色の違いを返す損失関数を定義する必要があります。フィルターが完全な場合、損失関数は0を返します。

色の違いを2つの指標の合計として測定します。

  • 目標は最も近いRGB値を生成することなので、RGBの違い。
  • HSLの違い。多くのHSL値がフィルターに対応しているためです(たとえば、色相はと大まかに相関しhue-rotate()、彩度はと相関しsaturate()ます)。これはアルゴリズムをガイドします。

損失関数は1つの引数(フィルターのパーセンテージの配列)を取ります。

次のフィルター次数を使用します。

filter: invert(a%) sepia(b%) saturate(c%) hue-rotatedeg) 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にいくつかの変更/最適化を行いました。

  • 最後ではなく、生成された最良の結果を使用します。
  • すべてのアレイを再利用する(deltashighArgslowArgs)、代わりに、各反復でそれらを再作成します。
  • 値の配列を使用して、代わりに単一の値を、。これは、すべてのフィルターが異なるため、異なる速度で移動/収束する必要があるためです。
  • fix各反復後に関数を実行します。saturate(最大値が7500%の場合)brightnessおよびcontrast(最大値が200%の場合)とhueRotate(値が固定されずに折り返されている場合を除いて)すべての値を0%から100%に固定します。

SPSAは2段階のプロセスで使用します。

  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を増減する場合は適宜調整してください。
  • --debug各反復の結果を確認する場合は、フラグを使用します。

TL; DR


3
開発プロセスの非常に素晴らしい要約!私の考えを読んでいますか?
Dave

1
@Dave実際、私はこれを個別に取り組んでいましたが、あなたは私を倒しました。
MultiplyByZer0

4
すばらしい答えです!このコードペンでの実装
KyleMit 2018

3
これは完全に狂った方法です。SVGフィルター(feColorMatrixの5列目)を使用して直接色を設定でき、CSSからそのフィルターを参照できます。なぜこのメソッドを使用しないのですか?
Michael Mullany 2018

2
@MichaelMullanyさて、私がこれに取り組んだ時間を考えると、それは私にとって恥ずかしいことです。私はあなたの方法を考えていませんでしたが、今は理解しました。任意の色に要素の色<filter>を変更するに<feColorMatrix>は、適切な値を持つa を含むSVGを動的に生成します(ターゲットRGBを含む最後の列を除くすべてゼロ)値、0、1)、SVGをDOMに挿入し、CSSからフィルターを参照します。解答として解答を(デモを含めて)書いてください。そうすれば賛成します。
MultiplyByZer0 2018

55

これはウサギの穴を下るかなりの旅でしたが、ここにあります!

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の回答で詳細に説明されている理由により、ステップの反復をより細かくするか、より多くのフィルター関数を実装することで、より良い結果を得ることができます。

EDIT2: OPはブルートフォースではないソリューションを探しています。その場合は非常に簡単です。次の方程式を解いてください。

CSSフィルターマトリックス方程式

どこ

a = hue-rotation
b = saturation
c = sepia
d = invert

私が入れた場合255,0,255、私のデジタルカラーメーターは結果を#d619d9ではなくとして報告し#ff00ffます。
Siguza

@Siguza完璧ではありません。エッジケースの色は、ループの境界を調整することで調整できます。
デイブ

3
その方程式は「かなり単純」ではない
MultiplyByZer0

上記の方程式も欠けていると思いますclampか?
glebm

1
クランプには場所がありません。そして、私が大学の数学から覚えていることから、これらの方程式は数値計算、つまり「ブルートフォース」によって計算されているので、幸運です!
デイブ

28

注: OPから削除の取り消しを求められましたが、報奨金はDaveの回答に送られます。


私はそれが質問の本文で尋ねられたものではなく、確かに私たち全員が待っていたものではないことを知っていますが、これを正確に行うCSSフィルターが1つあります: drop-shadow()

警告:

  • 影は既存のコンテンツの背後に描画されます。つまり、絶対配置のトリックをいくつか行う必要があります。
  • すべてのピクセルは同じように扱われますが、OPは、「黒以外の色に何が起こるかを気にする」と述べました[私たちがすべきではありません]
  • ブラウザのサポート。(私はそれについて確信がありません、最新のFFとクロムの下でのみテストされました)。

/* 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>


1
超賢い、すごい!これは私にとっては
うまくいき

毎回色が100%正確なので、これはより良い解決策だと思います。
user835542

そのままのコードは空白ページ(W10 FF 69b)を示します。ただし、アイコンに問題はありません(個別のSVGを確認)。
Rene van der Lende

を追加background-color: black;する.icon>spanと、FF 69bでこれが機能します。ただし、アイコンは表示されません。
Rene van der Lende

@RenevanderLende FF70で試したところ、まだ機能しています。それがあなたのために機能しない場合、それはあなたの側にあるものでなければなりません。
海洋堂

15

CSSから参照されるSVGフィルターを使用するだけで、これをすべて非常に簡単にすることができます。色を変更するには、feColorMatrixが1つだけ必要です。これは黄色に変色します。feColorMatrixの5番目の列は、単位スケールでの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を介してターゲットの色を制御することはできないようです。
glebm

適用する色ごとに新しいフィルターを定義する必要があります。しかし、それは完全に正確です。上記の答えが証明するように、色相回転は特定の色を切り取る近似です-つまり、特定の色を使用して正確に実現することはできません。本当に必要なのはrecolor()CSSフィルターの省略表現です。
Michael Mullany

MultiplyByZer0の答えは、HTMLを変更せずに非常に高い精度で達成する一連のフィルターを計算します。hue-rotateブラウザーでのtrue はいいです。
glebm

2
これは、fecolorMatrixに "color-interpolation-filters" = "sRGB"を追加した場合に、黒のソース画像に対して正確なRGBカラーのみを生成するようです。
John Smith、

エッジ12-18は、url関数caniuse.com/#search=svg%20filterを
Volker E.

2

SVGフィルターによる処理の例が不完全であることに気付いたので、私は自分で書きました(これは完全に機能します)。(Michael Mullanyの回答を参照してください)。

これは、コードでのみSVGフィルターを使用する2番目のソリューションです=> URL.createObjectURL


1

ただ使う

fill: #000000

fillCSS のプロパティは、SVGシェイプの色を入力するためのものです。fillプロパティには、任意のCSSの色の値を受け入れることができます。


3
これは、SVG画像の内部のCSSで機能する可能性がありimgますが、ブラウザーによって要素に外部から適用されたCSSとして機能しません。
David Moles

0

私は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');

グレースケールフォールバック

上記のバージョンが機能しない場合は、グレースケールフォールバックを追加することもできます。

saturateおよびbrightness機能は、(あなたは色が既に黒の場合という含める必要はありません)黒に任意の色を回しますinvert、次いで、所望の明度(とそれを明るくL)と、任意に、あなたはまた、不透明度(指定することができAを)。

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

SCSSミックスイン

色を動的に指定する場合は、次のSCSSミックスインを使用できます。

@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フィルターが機能しない場合、グレースケールフォールバックがありますます。
  • ミックスインを使用する場合、使用方法は非常に簡単です(上記の例を参照)。
  • 色がより読みやすくなっていますセピアトリックよりもやすく、変更が簡単です(純粋なCSSのRGBAコンポーネント、SCSSでHEXカラーを使用することもできます)。
  • 奇妙な動作をhue-rotate回避します。

警告:

  • すべてのブラウザーがデータURL(特にidハッシュ)からのSVGフィルターをサポートするわけではありませんが、現在のFirefoxおよびChromiumブラウザーで機能します(およびその他の)で機能します。
  • 色を動的に指定する場合は、SCSSミックスインを使用する必要があります。
  • 純粋なCSSバージョンは少し見苦しいです。多くの異なる色が必要な場合は、SVGを複数回含める必要があります。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.