ブレンドモード

ブレンドモード (Blend Mode / 描画モード) は、上位レイヤーのピクセル値と下位レイヤーのピクセル値を数学的な演算で合成し、最終的な表示色を決定する仕組みである。Photoshop が 1990 年代に普及させた概念で、現在は CSS の mix-blend-mode や Canvas API でも利用可能になっている。

代表的なブレンドモードとその計算式を以下に示す (値は 0-1 に正規化)。

• 乗算 (Multiply): 結果 = A × B。暗い部分がより暗くなる。影の追加や色の重ね塗りに使用
• スクリーン (Screen): 結果 = 1 - (1-A)(1-B)。明るい部分がより明るくなる。光の表現やハイライト追加に使用
• オーバーレイ (Overlay): 暗い部分に乗算、明るい部分にスクリーンを適用。コントラスト強調に効果的
• ソフトライト (Soft Light): オーバーレイより穏やかな効果。自然な明暗調整に適する
• 差の絶対値 (Difference): 結果 = |A - B|。2 枚の画像の差分検出に利用される

実務での活用例を挙げる。

• テクスチャ合成: 紙やキャンバスのテクスチャを乗算モードで重ね、質感を付与する
• カラーグレーディング: ソフトライトで色調補正レイヤーを重ね、映画的な色味を実現する
• ロゴの背景除去: スクリーンモードで黒背景のロゴを白背景に自然に合成する

CSS では mix-blend-mode で要素同士の合成、background-blend-mode で背景画像同士の合成を制御する。GPU アクセラレーションが効くため、リアルタイムのインタラクティブ表現にも適している。