奥が深すぎた!レイヤーの描画モード「色相」「カラー」の違い【フォトショ】【クリスタ】

描画モードの色相・カラーの違い デザイン
デザイン

レイヤーの描画モード[色相][カラー。アナタも使ったことがあるのでは?

Photoshop以外でも、CLIP STUDIO、色々なお絵かきソフトでもありますよね。
フォトショだと「描画モード」、クリスタでは「合成モード」、「ブレンドモード」なんて呼び方をする場合もあります。

おはようございます。こんにちは。こんばんは。
DTPデザイナー歴約15年、現役グラフィックデザイナーのセトガワです。

私もよくPhotoshopやIllustratorでお世話になる「描画モード」ですが、その中の[色相]と[カラー]の違いをイマイチ理解していなかったので、掘り下げてみました。
…でも、調べてみると、めちゃくちゃ奥が深くて、途中で調べ始めたことを若干 後悔しました…笑

使い分けは、彩度の低い色を鮮やかな色に合成したい場合は[カラー]、
合成前の光と影のグラデーションをより自然に合成したい場合は[色相]を
まず試してみてください!

各公式の説明は…

まず確実なのは公式だ!Adobeさん、セルシスさん!説明しておくれ!

ということで、公式ヘルプを見てみます。

Adobe Photoshop マニュアル▼

色相 ベースカラーの輝度と彩度、およびブレンドカラーの色相を持つ最終カラーが作成されます。

カラー 基本色の輝度と、合成色の色相および彩度を使用して、結果色を作成します。これにより、画像内のグレーレベルが保持され、モノクロ画像のカラー化およびカラー画像の階調化に役立ちます。

引用:Adobe Photoshop マニュアル 描画モード

CLIP STUDIO TIPS▼

・色相
下のレイヤーの明度と彩度の値を維持したまま、設定レイヤーの色相を適用します。

・カラー
下のレイヤーの明度の値を維持したまま、設定レイヤーの色相と彩度を適用します。

引用:CLIP STUDIO TIPS 合成モードを使用する

ふむふむ、なるほど、分かるけど、なんか分からん!

[色相][カラー]の比較

よく熟読してみると、以下のことが導き出されます。

[色 相]:基本色の明度・彩度が維持され、合成色の色相が適用される
[カラー]:基本色の明度が維持され、合成色の色相・彩度が適用される

共通なことは、明度が維持され、色相が適用されること。
彩度【維持】されるのか or 【適用】されるのか、というところがポイントですね。

…Adobeのマニュアルには「維持される」とはどこにも書いていないんですが、
CLIP STUDIOヘルプには「維持したまま」とあります。
フォトショ・クリスタの両方で試した結果はほとんど同じだったので、ほぼほぼ同じロジックと考えて良さそうです。

合成結果を見てみましょう。

基本色」は画像内の元の色、「合成色」は適用される色、「結果色」は適用したことよって生成される色です。

パッとみた感じ、似ています。
でも、よく見ると、鮮やかさが違う部分がありますよね?

色相][カラー]ともに共通して維持される明度を基準に、色相・彩度・明度の3つの数値から、違いを探ってみます!

色相・彩度・明度 の3つの要素から定義された「HSBカラーモデル」を使った数値です。
※H:色相(Hue)、S:彩度(Saturation)、B:明度(Brightness)

低明度(暗い色)の部分

見た目も・数値上も、結果色に[色相][カラー]の差はあまり大きく感じられません。

基本色の明度がもともと低く暗い色なので、暗色は暗色として、“色相だけが変わった”という印象ですね。

中明度(中間色)の部分

大きく違いが出ました!
カラー]の方が全体的に鮮やかになっています。

特にわかりやすいのは、ⒷとⒹの色・☆部分ですね。

カラー]は、合成色の色相と彩度が適用されます。
Ⓓを見てみると、基本色の低彩度(27%)なため、合成色の高彩度の青色が適用されて、このような結果色になりました。

対して、色相]は、基本色の彩度が維持されますので、色相だけが青に適用されます。

ⒶとⒸは、基本色の彩度がどちらも100%。
100%の基本色に100%の合成色を適用しているので、[色相][カラー]にあまり差が見られないという訳です。

高明度(明るい色)の部分

中明度同様、[カラー]の方が鮮やかです。

それぞれの数値を見てみる、やはり、基本色の彩度がキーポイントです。

ⒶとⒸの基本色は彩度が5%と低いです。
色相]は基本色の彩度が維持されるのでくすんだ薄い黄色に、
そして[カラー]は合成色の彩度が適用されるので鮮やかな薄い黄色になりました。

そして、心なしか[カラー]の方がコントラストがハッキリしています。明暗のグラデーションがあまり滑らかではありません。

これは、基本色と合成色の輝度が近いことが影響しています。明度ではなく“輝度(きど)”です。

輝度は、同じ明度・同じ彩度でも色相によって変わります。

(↓ちょっとややこしい事を書きますので、知りたい方だけどうぞ↓)

“輝度”とは、人が目で見て感じる色の明るさのことです。

解説の中では便宜上「明度」に統一して記載しましたが、「明度」と「輝度」は同じ明るさのことながら、厳密には違います。
原色の黄色と青色を比べると、明度は同じでも黄色のほうが明るく感じます。この“感じるを明るさ”を数値化したものが輝度です。

輝度へ数値化すると、ⒷとⒹの基本色の輝度・合成色のピンク色の輝度は、ともに40%前後でした。かなり近い輝度 同士なので、彩度が適用される[カラー]では合成色のピンク色の彩度の高さが目立つ、ということです。

描画モードを使う前に数値化してみると、輝度が近いのかどうかが分かりますが…
手間が増えますし、ぶっちゃけメンドクサイです!!!!!(力いっぱい)
色相][カラー]の両方試してみる方が断然早いです。

番外編〜基本色が白黒なら

カラー]なら、モノクロに色を付けることができます!

思い出してください。
適用されるのは、[色相]は色相だけですが、カラー]は色相と彩度です!
基本色の彩度は気にせずイけちゃいます。

そしてちゃっかり、Adobeのマニュアルにも、ひとこと書いてあります。(黄色の部分)

カラー 基本色の輝度と、合成色の色相および彩度を使用して、結果色を作成します。これにより、画像内のグレーレベルが保持され、モノクロ画像のカラー化およびカラー画像の階調化に役立ちます。

引用:Adobe Photoshop マニュアル 描画モード

描画モードを[カラー]すると、このモノクロのクレヨンたちを、マーブルのクレヨンにすることもできます〜♪

例えば他にも、
ご先祖さまの白黒写真をカラー写真のように加工することもできちゃいます。
ひいおじいちゃん・ひいおばあちゃんの白黒写真をカラー写真にして、おばあちゃんが喜んでくれたり…な〜んてこともあるかも…。

[色相][カラー]の違いまとめ

色 相]:基本色の明度・彩度が維持され、合成色の色相が適用される
カラー]:基本色の明度が維持され、合成色の色相・彩度が適用される

彩度が【維持されるのか or 適用されるのか】がポイントで、それによって結果色に大きく差が出ます。

合成色 \ 基本色基本色の彩度が高い基本色の彩度が低い
合成色の彩度が高い色 相:鮮やかな色
カラー:鮮やかな色
色 相:くすんだ色
カラー:鮮やかな色
合成色の彩度が低い色 相:くすんだ色
カラー:鮮やかな色
色 相:くすんだ色
カラー:くすんだ色

彩度の低いものを鮮やかな色に合成したい場合は[カラー]、
合成前の光と影のグラデーションをより自然に合成したい場合は[色相]が私のオススメです!

ですが、どちらが自分のイメージに近く合成できるかは、頭で考えるよりも
色相][カラー]をどちらも試してみることが近道です!

いかがだったでしょうか?
日頃、描画モード・合成モードを使っていたなら、何とな〜くでもわかっていただけたと思います!

ほんと、奥が深い[色相][カラー]でした。

セトガワ
セトガワ

写真・画像の加工を楽しんで、素敵な作品づくりをしてくださいね!

タイトルとURLをコピーしました