98

別の無地の色で「リボン」が走っている背景色があるとします。ここで、リボンを部分的に透明にして、一部の詳細をブレンドしますが、リボンを背景上で「同じ色」に保ちます。

特定の不透明度/アルファがリボンの色の 100% 未満の場合、背景の不透明度が 100% の色と同一である必要がある RGB 値を (簡単に) 決定する方法はありますか?

これが写真です。背景はrgb(72, 28, 97)、リボンrgb(45, 34, 70)です。rgba(r, g, b, a)この無地と同じように見えるように、リボンの が必要です。

ここに画像の説明を入力

4

7 に答える 7

136

カラーブレンディングはチャンネルごとの線形補間ですよね？したがって、数学は非常に簡単です。RGB2 上に RGBA1 がある場合、有効な視覚的結果 RGB3 は次のようになります。

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

…ここで、アルファ チャネルは 0.0 から 1.0 です。

サニティ チェック: アルファが 0 の場合、RGB3 は RGB2 と同じですか? はい。アルファが 1 の場合、RGB3 は RGB1 と同じですか? はい。

背景色と最終色のみをロックダウンした場合、要件を満たす可能性のある RGBA 色 (無限、浮動小数点空間) が多数存在します。したがって、バーの色または必要な不透明度レベルのいずれかを選択し、もう一方の値を見つける必要があります。

アルファに基づく色の選択

RGB3 (最終的な目的の色)、RGB2 (背景色)、および A1 (必要な不透明度) がわかっている場合、RGB1 を探しているだけであれば、次のように方程式を再配置できます。

r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1

理論的には可能ですが、標準の RGBA 範囲では不可能な色の組み合わせがいくつかあります。たとえば、背景が純粋な黒で、目的の知覚色が純粋な白で、目的のアルファが 1% の場合、次のものが必要になります。

r1 = g1 = b1 = 255/0.01 = 25500

…入手可能などの製品よりも 100 倍明るい超明るい白色。

色に基づいてアルファを選択する

RGB3 (最終的な目的の色)、RGB2 (背景色)、および RGB1 (不透明度を変更したい色) がわかっている場合、A1 を探しているだけであれば、次のように並べ替えることができます。したがって、方程式：

a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)

これらが異なる値を与える場合、正確に一致させることはできませんが、アルファを平均して可能な限り近づけることはできます。たとえば、世界には、赤の上に緑を置いて青にする不透明度はありません。

于 2012-09-01T14:39:37.847 に答える
8

Phrogzとephemerの優れた回答のおかげで、最適な同等の RGBA カラーを自動的に計算するSASS 関数を次に示します。

目的の色と既存の背景を指定して呼び出すと、各 RGB コンポーネントの ±1/256 以内で目的の結果が得られる最適な (最も透明な) 同等の RGBA 色が計算されます (丸め誤差による)。

@function alphaize($desired-color, $background-color) {

    $r1: red($background-color);
    $g1: green($background-color);
    $b1: blue($background-color);

    $r2: red($desired-color);
    $g2: green($desired-color);
    $b2: blue($desired-color);

    $alpha: 0;
    $r: -1;
    $g: -1;
    $b: -1;

    @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
        $alpha: $alpha + 1/256;
        $inv: 1 / $alpha;
        $r: $r2 * $inv + $r1 * (1 - $inv);
        $g: $g2 * $inv + $g1 * (1 - $inv);
        $b: $b2 * $inv + $b1 * (1 - $inv);
    }

    @return rgba($r, $g, $b, $alpha);
}

いくつかの組み合わせ (すべての Bootswatch テーマ) に対してテストしたところ、ダーク オン ライトとライト オン ダークの両方の結果でうまく機能します。

PS: 結果の色に ±1/256 精度よりも優れた精度が必要な場合は、rgba 色をブレンドするときにブラウザが適用する丸めアルゴリズムの種類を知っておく必要があります (それが標準化されているかどうかはわかりません)。必要な精度に達するまで@while増加し続けるように、既存の に条件を適用します。$alpha

于 2016-07-08T11:13:37.017 に答える
6

@Phrogzの回答から：

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

そう：

r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1

そう：

r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2

の任意の値を選択できることに注意してください。a1これにより、対応するr1、g1、およびb1必須の値が検出されます。たとえば、1 のアルファを選択すると、RGB1 = RGB3 が必要であることがわかりますが、0 のアルファを選択すると (明らかに) 解決策が得られません。

于 2012-09-01T14:46:29.610 に答える
1

これまでに見つけた最も実用的な解決策は、結果の色をカラー ピッカー ツールで測定し、測定した色をオーバーレイに使用することです。この方法により、完全な色の一致が得られます。

さまざまなミックスインを使用してみましたが、丸め誤差のため、肉眼で違いを確認できました

于 2020-09-25T15:44:17.627 に答える