七色雑記

表記

このページでは以下のような表記を用います。

• 基本色：レイヤー合成における下レイヤーの色
• 合成色：レイヤー合成における上レイヤーの色
• 結果色：レイヤー合成における合成後の色
• 不透明度：特に断りがない場合、上レイヤーの不透明度

また、数式中では色の値を以下のように扱います。

• 通常のペイントソフトでは RGB 値は 0 - 255 ですが、数式中では 0 - 1 へ正規化して扱います
• 不透明度も 0 - 1 へ正規化して扱います。0 が透明、1 が不透明です
• 1 - x を ~x と表記することにします。これは階調を反転させる操作を表します
• 1 / x を Inv(x) と表記することにします。x が 0 以上 1 以下のとき、Inv(x) は必ず 1 以上になるので、Inv(x) を乗算された値はコントラストが大きくなります

不透明度の扱いについて

個々の合成モードの説明に入る前に、まず始めに、不透明度の扱いについてまとめておきます。

たいていのペイントソフトのレイヤー合成では、一部の合成モードを除き、合成結果は以下のような計算式になります。ただし、ここでは簡単のために基本色は完全不透明とします。

結果色 = 基本色 × ~不透明度 + 〈合成色を完全不透明とした場合の結果色〉 × 不透明度

この式を図で表すと以下のようになります。

レイヤー合成という処理を、「下レイヤーに対して上レイヤーによってエフェクトをかける」と捉えた場合、上の式は、「エフェクトを最大までかけた結果と、まったく掛けなかった結果を、不透明度に比例してブレンドする」ことを意味します。これは、たいていの合成モードにおいては最適な方法とは言えません。本来であれば「エフェクトの強さを不透明度によってコントロールする」ほうが都合が良いはずです。

これに対する解決策として、CLIP STUDIO PAINT では、「加算」と「覆い焼き」については「発光」が付くブレンドモードが用意されています。この場合、まず合成色に不透明度を乗算し、その後に、不透明度最大で通常通り「加算」「覆い焼き」の合成を行います。この処理を図で表すと以下のようになります。

「加算」や「覆い焼き」は合成色の値が大きい（明るい）ほど効果が大きくなるため、「発光」モードを使用することで、合成色にあらかじめ不透明度が乗算され、効果の大きさが不透明度によって調整できるようになります。

なお、CLIP STUDIO PAINT 以外のペイントソフトで同じ効果を得たい場合、もしくは CLIP STUDIO PAINT でも「加算」「覆い焼き」以外の合成モードを使用する場合には、以下のような手順にします。

1. レイヤーフォルダーを新規作成し、フォルダー自体を目的の合成モードに設定する
2. レイヤーフォルダーの中にレイヤー（合成モードは通常）を新規作成し、白、グレー、または黒（どれを選ぶかは合成モードによる）で全体を塗りつぶす
3. 2. で作成したレイヤーの上に透明なレイヤー（合成モードは通常）を新規作成し、そのレイヤーにブラシなどで目的の描画を行う

ガンマ補正の扱いについて

まず、ガンマ補正を知らない人向けに説明しておくと、ここで言っているガンマ補正とは、モニターで勝手に掛けられてしまうトーンカーブのことです。

例えば、ペイントソフトで RGB 値 127 のグレーを作った場合、グラボやモニタープロファイルの設定をしていない限り、PC の映像出力端子からはそのまま RGB 値 127 に相当する信号、つまり 254 の半分の信号が出力されます。ところが、それを受け取ったモニターは、内部で勝手にトーンカーブをかけて、およそ 254 の半分よりもずっと低い輝度で画面に表示します。つまり、画像データの RGB 値と、実際にモニターに出力される輝度は、比例の関係ではなくなります。

これは PC に限ったことではなく、スマートフォン等を含むほぼすべての表示デバイスにおいて、同様の処理が行なわれています。

一方、光を画像データに変換するカメラやスキャナでは、モニター側でガンマ補正が行われることを想定して、あらかじめ逆の変換をしてから画像データを出力しています。

そうなると、ペイントソフトでもこれを考慮していないと色がおかしくなるはずなのですが、実はソフトによってこの辺の扱いはバラバラです。

実験で確かめてみたところ、GIMP では、レイヤー合成後のブレンドの段階で、ガンマ補正を考慮しているようです（例えば、RGB 値 0 と 254 を不透明度 50% で合成した結果は、127 ではなく、ガンマ補正が考慮されるのでもっと大きな値になります）。また、合成モードが「加算」の場合は、合成処理の段階でもガンマ補正を考慮しているようです（例えば、RGB 値 127 のレイヤーどうしを加算した結果は 254 ではなく、ガンマ値が考慮されるのでもっと小さな値になります）。

一方、CLIP STUDIO PAINT ではレイヤー合成においてガンマ補正を考慮していないようです。

ちなみに、ガンマ補正を考慮していないことの弊害として、レイヤーを合成したり色を混ぜたりしたときに、結果色が本来よりも暗くなってしまうという問題があります。わかりやすい例だと、ペイトンソフトでグラデーションをかけると中間色がくすむということが知られていますが、この現象の原因の一つが、ガンマ補正を考慮していないことに起因します（ほかにも原因はあります。GIMP ではグラデーションツールの設定によりこの現象を回避できます）。

合成モード比較

本題の、各合成モードの説明です。

ここでは、下の左のような画像を下レイヤー（基本色）、右のような画像を上レイヤー（合成色）として合成した結果を示します。

以下は「オーバーレイ」モードで合成した結果の例になります。

図の右に行くほど基本色が明るく、上に行くほど合成色が明るくなります。

また、これらと合わせて以下のようなグラフも示します。横軸が基本色、グラフの線の色が合成色、縦軸が結果色を表します。レイヤー合成を、「合成色によって基本色のトーンカーブをコントロールしている」と捉えたときのイメージに相当します。

通常

• 結果色 ＝ 合成色
• 上のレイヤーで下のレイヤーを置き換えます

加減算（下レイヤーの明るさを変化させる）系

加減算系の合成モードは、下レイヤーのトーンカーブを、コントラストは変えずに全体的に上へ持ち上げたり、下へ押し下げたりするような効果を持ちます。

加算

• 結果色 ＝ 基本色 ＋ 合成色
• 「加算」をトーンカーブで示すと、下のレイヤーのトーンカーブを、全体的に上へ持ち上げることに相当します
• 「加算」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ黒で塗りつぶしておきます。透明のままだと本来の効果を得られません。次の「加算（発光）」ではこの作業が不要になため、基本的には「加算（発光）」を使うのがおすすめです
• 「加算」は実世界において、その物体が他の照明から照らされるのに加えて、その物体自身が光を放っているような場合の見え方に相当します

加算（発光）

（図は「加算」と同じため省略）

• 結果色 ＝ 基本色 ＋ 合成色 × 不透明度
• 前に説明したとおり、発光レイヤーでは合成色に不透明度があらかじめ乗算されます。
• 「加算」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ黒で塗りつぶしておく必要がありました。「加算（発光）」ではこの作業が不要になります

減算

• 結果色 ＝ 基本色 － 合成色
• 「減算」をトーンカーブで示すと、下のレイヤーのトーンカーブを、全体的に下へ押し下げることに相当します
• 「減算」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ黒で塗りつぶしておきます。透明のままだと本来の効果を得られません
• 「減算」は、合成の結果得られる色が合成色の色相と逆になるので使いづらいです。基本的には反転処理が入った「焼き込み（リニア）」を使うのがおすすめです

焼き込み（リニア）

• 結果色 ＝ 基本色 － ~合成色 ＝ 基本色 ＋ 合成色 － 1
• 「減算」では上のレイヤーの色が反転されてしまって使いづらいので、上のレイヤーを反転させてから減算するようにしたものが「焼き込み（リニア）」です
• 「焼き込み（リニア）」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ白で塗りつぶしておきます。透明のままだと本来の効果を得られません

乗除算（下レイヤーのコントラストを変化させる）系

乗除算系の合成モードは、下レイヤーのトーンカーブを起こしたり寝かせたりする、つまりコントラストを上げたり下げたりする効果を持ちます。

乗算

• 結果色 ＝ 基本色 × 合成色
• 「乗算」をトーンカーブで示すと、下のレイヤーのトーンカーブを、黒を起点にして傾きを緩やかにする（コントラストを下げる）ことに相当します
• 「乗算」は、真っ黒な通常レイヤーの不透明度を RGB 別々にコントロールできるようにしたものと捉えることもできます。言い換えると、無彩色での「乗算」レイヤーは、通常レイヤーを半透明の黒で塗ったものと等価です
• 「乗算」レイヤーは、あらかじめ白で塗りつぶしたりしなくても、透明のままブラシで描画すれば本来の結果を得られます
• 「乗算」は実世界において、物体を照らす光もしくは観測者の目（カメラ）に入ってくる光が、色付きの透明な物体を透過したときの見え方に相当します。また、物体を照らす光の一部が遮られて影になる場合も、乗算で表すことができます

スクリーン

• 結果色 ＝ ~(~基本色 × ~合成色)
• 「乗算」では黒を起点に下レイヤーのコントラストを下げましたが、「スクリーン」では白を起点にコントラストを下げます
• 「スクリーン」は、真っ白な通常レイヤーの不透明度を RGB 別々にコントロールできるようにしたものと捉えることもできます。言い換えると、無彩色の「スクリーン」レイヤーは、通常レイヤーを半透明の白で塗ったものと等価です
• 「スクリーン」レイヤーは、あらかじめ黒で塗りつぶしたりしなくても、透明のままブラシで描画すれば本来の結果を得られます
• 「スクリーン」は、実世界において完全に一致する現象はおそらく存在しません。レタッチでもイラストでも使いどころが微妙です。しいて言うなら、視界に霧がかかっていて（もしくは埃っぽい部屋などで）、その霧が色の付いた光で照らされているような状況が、「スクリーン」の効果に比較的近いと思われます

除算

• 結果色 ＝ 基本色 ÷ 合成色 ＝ 基本色 × Inv(合成色)
• 「除算」では、合成色の逆数をとることで 1 よりも大きな値を作り出し、その値を基本色に乗算することで、基本色のコントラストを伸張します
• 「除算」をトーンカーブで示すと、下のレイヤーのトーンカーブを、黒を起点にして傾きを急峻にする（コントラストを上げる）ことに相当します。下レイヤーのもとから明るかった部分は白飛びします
• 「除算」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ白で塗りつぶしておきます。透明のままだと本来の効果を得られません
• 「除算」は、合成の結果得られる色が合成色の色相と逆になるので使いづらいです。基本的には反転処理が入った「覆い焼き（発光）」を使うのがおすすめです

覆い焼きカラー

• 結果色 ＝ 基本色 × Inv(~合成色)
• 「除算」は合成色の色相が逆になり使いづらいので、合成色をあらかじめ反転させるようにしたのが「覆い焼きカラー」です
• 「覆い焼きカラー」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ黒で塗りつぶしておきます。透明のままだと本来の効果を得られません。次の「覆い焼き（発光）」ではこの作業が不要になため、基本的には「覆い焼き（発光）」を使うのがおすすめです
• 「覆い焼きカラー」は実世界において、物体の一部分に光を当たっているときの見え方に相当します。「乗算」が光を遮ることに相当していたのとは逆になります
• レタッチにおいて、画像の一部分だけ露出を上げたりホワイトバランスをいじりたいときに使えます

覆い焼き（発光）

（図は「覆い焼きカラー」と同じため省略）

• 結果色 ＝ 基本色 × Inv(~(合成色 × 不透明度))
• 前に説明したとおり、発光レイヤーでは合成色に不透明度があらかじめ乗算されます。
• 「覆い焼きカラー」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ黒で塗りつぶしておく必要がありました。「覆い焼き（発光）」ではこの作業が不要になります

焼き込みカラー

• 結果色 ＝ ~(~基本色 × Inv(合成色))
• 「除算」では黒を起点に下レイヤーのコントラストを上げましたが、「焼き込みカラー」では白を起点にコントラストを上げます。下レイヤーのもとから暗かった部分は黒つぶれします
• 「焼き込みカラー」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめ白で塗りつぶしておきます。透明のままだと本来の効果を得られません

比較系

比較系の合成モードは、下レイヤーの暗部を底上げしたり、明部を潰して暗くしたりします。

比較（明）

• 結果色 ＝ max(基本色, 合成色)
• 「比較（明）」では R, G, B の各チャネルごとに、より大きい方の値をとります
• 「比較（明）」は、トーンカーブのグラフからわかるように、下のレイヤーの暗部を底上げするような処理と捉えられます
• 「比較（明）」レイヤーの不透明度が 100%（完全不透明）のとき、底上げされた部分の階調は完全に潰れます。半透明にすると、元の基本色とブレンドされるため、透明度に応じて階調が残ります
• 「比較（明）」レイヤーにブラシで描画する場合、レイヤー全体をあらかじめ黒で塗りつぶす場合と、透明のまま描画するのでは、得られる効果が異なります

比較（暗）

• 結果色 ＝ min(基本色, 合成色)
• 「比較（暗）」では R, G, B の各チャネルごとに、より小さい方の値をとります
• 「比較（明）」の逆であるため説明は省略します

なんとかライト系

ここまで紹介した合成モードは、明るくする、暗くする、コントラストを上げる、下げるなどのどれか１つだけを単独で行いましたが、ここから紹介するものは複合的な動作をします。

オーバーレイ

• 「オーバーレイ」は、基本色が明るいか暗いかによって、「スクリーン」と「乗算」が切り替わります。カラーマップを見ると、図の右半分と左半分でこれらが切り替わっていることがわかると思います。ただ、この解釈の仕方だと、「合成色を基本色で変調する」に近いため、「基本色の上から合成色を重ねる」という考え方とは相性が悪いです
• トーンカーブのグラフを見ると、「オーバーレイ」は、カーブの真ん中をつまんで、合成色に合わせて上下に動かすような操作に相当することがわかります。これにより、合成色が明るいか暗いかによって、基本色の暗部もしくは明部どちらかのコントラストを強調し、もう一方を圧縮する効果が得られます
• 「オーバーレイ」と似たような働きをする合成モードに「ビビッドライト」があります。「ビビッドライト」では、強調されない方のコントラストは完全に潰されるので、白飛び・黒つぶれが発生して「サチってる感（焼き付いてる感、振り切れてる感）」が出るのに対し、「オーバーレイ」では完全には階調が潰れないため、合成結果は比較的自然な見た目になります。

ソフトライト

• 結果色 ＝ 基本色^(2^(1 － 2 × 合成色))
• y=x^γ という式で表されるトーンカーブの γ はガンマ値と呼ばれます。「ソフトライト」は、上のレイヤーによって下のレイヤーのガンマ値をコントロールしているということになります
• 「ソフトライト」を使用すると、明部・暗部を保ったまま、中間領域の明るさを緩やかに調整できます

ハードライト

• 「ハードライト」は、合成色が明るいか暗いかによって「スクリーン」と「乗算」が切り替わります。「オーバーレイ」とは、基本色と合成色が逆の関係になります。カラーマップを見ると、図の上半分と下半分でこれらが切り替わっていることがわかると思います
• トーンカーブのグラフを見ると、グラフの傾きが緩やかになっていることがわかります。つまり、基本色のコントラストは低くなり、その分合成色の影響が強く出ます
• 見た目としては基本的には「スクリーン」に似ていますが、「スクリーン」では基本色が最初から明るい色の場合、それ以上 RGB 値が増加する余地が少ないため合成色の色が表れにくいのに対して、「ハードライト」では合成色によっては基本色の RGB 値を下げる方にもはたらくため、合成色の色が表れやすいです

ビビッドライト

• 「ビビッドライト」は、合成色が明るいか暗いかによって「覆い焼きカラー」と「焼き込みカラー」が切り替わります。カラーマップを見ると、図の上半分と下半分でこれらが切り替わっていることがわかると思います
• トーンカーブのグラフを見ると、グラフの傾きが急になっていることがわかります。これにより、基本色のコントラストが上がり、名前の通り鮮やか（ビビッド）な見た目になります。また、明部、暗部ではグラフが上下に張り付き、階調が潰れていることがわかります。これにより、白飛び・黒つぶれが発生して「サチってる感（焼き付いてる感、振り切れてる感）」が出ます
• 「ビビッドライト」レイヤーにブラシで描画する場合には、合成色が半透明だと本来の効果を得られないため、レイヤー全体をあらかじめ完全不透明のグレー (127.5) で塗りつぶしておく必要があります。ただし、CLIP STUDIO PAINT は色深度が 8bit 固定なので、RGB 値に小数を指定することができません。その場合、塗りつぶす色を 127 か 128 にする必要がありますが、結果色にわずかに合成色の影響が出てしまいます

リニアライト

• 「リニアライト」は、合成色が明るいか暗いかによって「加算」と「焼き込み（リニア）」が切り替わります。カラーマップを見ると、図の上半分と下半分でこれらが切り替わっていることがわかると思います。
• トーンカーブのグラフを見ると、グラフの傾きは変わらずに上下に移動していることがわかります。明部・暗部で白飛び・黒つぶれが発生するので、見た目としては「ビビッドライト」に近いですが、コントラストが変わらないので鮮やかさは少ないです。
• 「リニアライト」レイヤーにブラシで描画する場合には、「ビビッドライト」と同様、レイヤー全体をあらかじめ完全不透明のグレー (127.5) で塗りつぶしておく必要があります

ピンライト

• 「リニアライト」は、合成色が明るいか暗いかによって「比較（明）」と「比較（暗）」が切り替わります。カラーマップを見ると、図の上半分と下半分でこれらが切り替わっていることがわかると思います

ハードミックス

• 「ハードミックス」基本色と合成色を半々でブレンドした後に二値化します
• トーンカーブのグラフからわかるように、下のレイヤー（基本色）を二値化するときのしきい値を上のレイヤー（合成色）によってコントロールする、と捉えることもできます
• 「ハードミックス」レイヤーにブラシで描画する場合には、レイヤー全体をあらかじめグレー (127.5) で塗りつぶしておきます。透明のままだと本来の効果を得られません

除外

• 「除外」は、合成色によって基本色のトーンカーブの傾きを変化させます
• 合成色が黒のとき、基本色はそのまま結果色となります。合成色が白のとき、基本色は反転されて結果色となります

その他

カラー比較（明）

• 「カラー比較（明）」は、基本色と合成色を比較し、輝度が大きい方をそのまま結果色とします
• ここで言う「輝度」は、人間が目で見たときの色による感度の違いが考慮されるため、例えば G=255 の純色と B=255 の純色だったら、前者の方がより輝度が大きいと判断されます
• 「比較（明）」では R, G, B 各チャネルごとに独立に処理をしていたのに対し、「カラー比較（明）」では全チャネルをまとめて扱います
• 日本語だと「比較（明）」と「カラー比較（明）」で言葉の意味の違いがよくわかりませんが、英語だと「Lighten（明るくする）」と「Lighter Color（明るい方の色）」なので、こちらの方が実際の処理に即していると思われます

カラー比較（暗）

• 「カラー比較（暗）」は、基本色と合成色を比較し、輝度が小さい方をそのまま結果色とします
• 「カラー比較（明）」の逆であるため説明は省略します

差の絶対値

• 結果色 ＝ max(基本色 － 合成色, 合成色 － 基本色)
• イラストやレタッチなどではあまり使いどころがなさそうですが、２枚の画像の差分を確認したりするのに便利です

HSV 系

基本色を輝度 (Value), 色相 (Hue), 彩度 (Saturation) に分解し、そのうちのどれか１つまたは２つを合成色で置き換えるモードです。

ブラシを使って一部分だけ色味を調整するというような使い方の他に、トーンカーブやフィルターなどをかけるときに、それらをかける前のレイヤーをコピーしておいて、かけた後のレイヤーと合成することで、色相を変えずに輝度だけをトーンカーブで調整する、というような使い方ができます。

色相

基本色の色相を合成色で置き換えます。

彩度

基本色の彩度を合成色で置き換えます。

カラー

基本色の色相と彩度を合成色で置き換えます。

輝度

基本色の輝度を合成色で置き換えます。

まとめ

さいごに、以前 Twitter に投稿した画像を貼っておきます。