このページでは、２つの重なったオブジェクトの色の混ぜ方を設定する「ブレンドモード」という機能について紹介していきます。
- Contents
- ブレンドモードとは
- ブレンドモードとレイヤの関係
- モード一覧
(2023.1.16更新)
ブレンドモードとは
ブレンドモードというのは、２つのオブジェクトが重なって描画されるときに、重なっている上下のピクセル値２つにどんな演算を加えた結果を最終的な表示色とするかを指定するものです。
コンピュータグラフィックスの世界で基本的な機能として提供されている機能だそうです。
Inkscapeでは、上に重なっているオブジェクトのほうに通常のスタイル（色など）に加えてブレンドモードを設定するようになっています。そうすると、そのオブジェクトの下に別の色が重なったときにブレンドした色で表示されるようになります。
Inkscapeのフィル／ストロークダイアログの右下に、次のようなボタンがあります。
このボタンを押すと、ブレンドモードを設定するメニューが現れます。
ここでは、Inkscapeに用意されているブレンドモードの種類ごとにどんなブレンドが行われるのか（上のピクセル値と下のピクセル値に対してどのような演算を行うのか）をまとめていきたいと思います。
ブレンドモードとレイヤの関係
まず個々のモードについてまとめる前に気を付けないといけない点です。Inkscapeではないお描きソフトのブレンドモードについての一般的な説明書きでは、上下に重なっているものが「レイヤ」と呼ばれます。これはInkscapeで言うところの「オブジェクト」に相当すると思います。
一方で、Inkscapeで言うところの「レイヤ」はブレンドモードとは関係ありません。
だからブレンドモードの解説が一般的なグラフィックスの話として書いてあるのか、Inkscapeでのブレンドモードについて書いてあるのかに応じて、うまく読み替えないといけません。
特にInkscapeの古いバージョンでは、ブレンドモードはInkscapeでいうところの「レイヤ」ごとに設定することが可能だったので、Inkscapeの古い解説コンテンツを読んでいると特に混乱しやすいです。
以下ではInkscape用語に統一して「レイヤ」を使わずに「オブジェクト」を使おうと思います。
モード一覧
まずは設定可能なモードを列挙します。ブレンドモードについては、Inkscapeの他の機能にもありがちですが英語の解説コンテンツをあたらないといけないことが多いので、検索したりするときに便利なようにメニューに出てくる日本語名と英語名を併記しておきます。
もちろん、このモード名だけ見ても、どんなブレンドが行われるのか全然分かりません。
ちなみにこのモード群はCSS（スタイルシート）でサポートされているものと同じで、Inkscapeでこれらのモード群がサポートされたのはリリースノートによればバージョン０．９２からです。
以下、モードごとの意味と簡単なサンプルをまとめます。
標準：Normal
上下のピクセルには何も演算を行わない（ブレンドしない）モードです。要するに上に重ねたほうの色が表示されます。
標準モードを設定したオブジェクトを次のように上に重ねると、下の色は隠れます。
乗算：Multiply
ピクセルの上下の色の値を掛けた色になります。色の値は最小値を「0.0」とし、最大値を「1.0」とします。（色の値については他のモードでも同じ）
0.1（暗い色）と0.9（明るい色）だと、表示色は0.09
0.1（暗い色）と0.1（暗い色）だと、表示色は0.01
0.9（明るい色）と0.9（明るい色）だと、表示色は0.81
になるので、元の色より暗い色になります。
スクリーン：Screen
明るい色と暗い色を反転させてブレンドした色になります。
表示される色の値は「1.0 - (1.0 - 下の色) × (1.0 - 上の色)」になります。
0.1（暗い色）と0.9（明るい色）だと、表示色は0.91
0.1（暗い色）と0.1（暗い色）だと、表示色は0.19
0.9（明るい色）と0.9（明るい色）だと、表示色は0.99
になるので、「乗算」とは逆に元の色より明るい色になります。
明るい色を重ねると、下の色の明るさの違いは目立たなくなりますね。
比較（暗）：Darken
上下の色の小さいほう（暗いほう）を表示色にします。
0.1（暗い色）と0.9（明るい色）だと、表示色は0.1
0.1（暗い色）と0.1（暗い色）だと、表示色は0.1
0.9（明るい色）と0.9（明るい色）だと、表示色は0.9
比較（明）：Lighten
上下の色の大きいほう（明るいほう）を表示色にします。
0.1（暗い色）と0.9（明るい色）だと、表示色は0.9
0.1（暗い色）と0.1（暗い色）だと、表示色は0.1
0.9（明るい色）と0.9（明るい色）だと、表示色は0.9
オーバーレイ：Overlay
下の色が暗めの色（ < 0.5 ）のときは「乗算」を行い、下の色が明るめの色（ ≧ 0.5 ）のときは「スクリーン」を行います。
実際はもう少し複雑で、表示される色の値は、
下の色 < 0.5 では「下の色 × 2.0 × 上の色」
下の色 ≧ 0.5 では「1.0 - (1.0 - (下の色 × 2.0 - 1.0)) × (1.0 - 上の色)」
例としては、
下が0.1（暗い色）で上が0.9（明るい色）だと、表示色は0.18
下が0.1（暗い色）で上が0.1（暗い色）だと、表示色は0.02
下が0.9（明るい色）で上が0.9（明るい色）だと、表示色は0.98
下が0.9（明るい色）で上が0.1（暗い色）だと、表示色は0.82
下の色が明るかった場合はさらに明るくなり、下の色が暗かった場合はさらに暗くなることで、コントラストが強くなるという効果があるそうです。
覆い焼きカラー：Color Dodge
下の色の値を、上の色を反転させた色の値で割ります。
表示される色の値は「 1.0 と 下の色／( 1.0 - 上の色 ) の小さいほう」になります。
下が0.1（暗い色）で上が0.9（明るい色）だと、表示色は1.0
下が0.1（暗い色）で上が0.1（暗い色）だと、表示色は0.11
下が0.9（明るい色）で上が0.9（明るい色）だと、表示色は1.0
下が0.9（明るい色）で上が0.1（暗い色）だと、表示色は1.0
下の色が暗いときに、上の色の明るさに合わせて、下の色も明るくなり、コントラストが強くなるという効果があるそうです。
焼き込み：Color Burn
下の色を反転させた値を、上の色の値で割り、その結果を反転させた色になります。（なんのこっちゃ）
表示される色の値は「 1.0 - ( 1.0 と ( 1.0 - 下の色 ) / 上の色 の小さいほう )」になります。（うーん・・・）
下が0.2（暗い色）で上が0.9（明るい色）だと、表示色は0.11
下が0.2（暗い色）で上が0.2（暗い色）だと、表示色は0.0
下が0.9（明るい色）で上が0.9（明るい色）だと、表示色は0.89
下が0.9（明るい色）で上が0.2（暗い色）だと、表示色は0.5
上の色が暗いときに、下の色の明るさに合わせて、上の色も暗くなるそうです。
ハードライト：Hard Light
「オーバーレイ」の上下の色を入れ替えたもので、上の色が暗めの色（ < 0.5 ）のときは「乗算」を行い、上の色が明るめの色（ ≧ 0.5 ）のときは「スクリーン」を行います。
下が0.1（暗い色）で上が0.9（明るい色）だと、表示色は0.82
下が0.1（暗い色）で上が0.1（暗い色）だと、表示色は0.02
下が0.9（明るい色）で上が0.9（明るい色）だと、表示色は0.98
下が0.9（明るい色）で上が0.1（暗い色）だと、表示色は0.18
上の色が明るかった場合はさらに明るくなり、上の色が暗かった場合はさらに暗くなることで、コントラストが強くなるという効果があるそうです。
ソフトライト：Soft Light
「ハードライト」と同じように上の色によって「乗算」と「スクリーン」を切り替えることでコントラストを強くするモードですが、「ハードライト」よりも効果は小さめなのだそうです。表示される色の演算方法は複雑なので省略。
差分：Difference
上の色と下の色の差の絶対値を表示色の値とします。
0.1と0.9だと、表示色は0.７
0.9と0.9だと、表示色は0.0
上下で色が大きく違うところが明るく表示されるようです。
排他：Exclusion
「差分」とほとんど同じ効果だけれど、表示される色の値は、
「下の色 + 上の色 - (2.0 × 下の色 × 上の色)」
0.1と0.9だと、表示色は0.82
0.9と0.9だと、表示色は0.18
上下の色が大きく違うところが明るく表示されるけれど、「差分」ほどは強調されないようです。
色相：Hue
下の色の明度と彩度、上の色の色相を組み合わせた表示色になるそうです。
彩度：Saturation
下の色の明度と色相、上の色の彩度を組み合わせた表示色になるそうです。
色：Color
下の色の明度、上の色の彩度と色相を組み合わせた表示色になるそうです。
輝度：Luminosity
下の色の彩度と色相、上の色の明度を組み合わせた表示色になるそうです。
