【Blender4.5】ノードで使える色空間：RGB, HSL, HSV, YUVの違い

Blenderの Separate Colorノードで選べるカラー空間（色空間）の違いまとめです。

Blender の Separate Color ノード（Separate RGB/HSL/HSV/YUV/YCbCr）は、1つのカラーを別の成分に分解して扱いたいときに使います。

色空間とは、色を数値で表すためのルールや座標系のことです。一般で使われる色空間RGB/HSL/HSV/YUV/YCbCrの違いを正確に理解している人も少ないと思いますので、どのような色空間があるのか、その特性を解説します。

それぞれの 色空間の特徴 と 分解後の値の意味 を整理し、用途や明度調整などに使えるパラメータなども説明しています。
（一般的な色空間の解説も多いですが、使い方や細かい設定はBlender特有のものもありますのでご了承ください。）

この記事は、Blenderのノードで使える色空間について解説している初級～中級者向けの記事です。

難易度　3.0

Separate Colorノードのモード

まず、どこで色空間を扱えるのかについてですが、Separate Colorノードを扱い、色を分解するときに使えます。

Separate Colorノードは、マテリアルシェーダーで使う場合と、コンポジットノードで使う場合で、扱える色空間のモードが違います（Blender4.5の場合）

マテリアルシェーダーで使えるモード

コンポジットで使えるモード

RGB
HSV
HSL
YCbCr
YUV

今回は種類が多いのでコンポジットでのノードで検証などを行っています。

※ちなみに以下の色空間の説明はBlenderのノード設定で使えるものを基準にしています。一般の色空間とは数値の範囲など細かい違いがあることをご了承ください。

RGB（Red / Green / Blue）

光の三原色。画面表示やレンダリングなど、最も基本となる色空間。

RGB の値

R（赤チャンネル）
G（緑チャンネル）
B（青チャンネル）

R,G,Bチャンネルの組み合わせで色を表現する。

値は色成分の強さを表す。すべて 0.0〜1.0 のリニア値。（※RGBの設定時に1.0以上の値を入れることが可能）

Blenderで「Color」として扱うデータはすべて RGB

RGB はディスプレイで光を表現するための基本の色空間で、ディスプレイ（PCモニタ、スマホ、テレビなど）は光の三原色（Red, Green, Blue）を混ぜて色を作る方式で動いています。

人間の目の構造（錐体）が

赤に反応する細胞
緑に反応する細胞
青に反応する細胞

で構成されているから、RGB の光を混ぜると、ほぼすべての色を再現できます。

※他の色空間（HSL,HSV,YUVなど）はRGB を人間にとって操作しやすいように変換した色空間。

特徴

各値は色の強さを反映する。数値が大きくなるほど明るくなるが、純色が最大になる。（※輝度で見ると純赤（1,0,0）は白（1,1,1）より暗いですが、RGBでは各色の数値を単色で最大にしても白になることはありません。）
RGBを混ぜることで色を作る。RGBの数値を同量で混ぜると彩度が落ちる
３色を組み合わせることで色を作るので、「色相」「彩度」そのものを調整するのは難しい。
BlenderでColorとして出力される値がRGBを想定した数値なので、合成計算やシェーダーでよく使われる。

特にシェーダーで位置を色で表したり、確認するときにもRGBが使われています。XYZの座標とRGBの各値が対応し、色で方向や位置が区別されることも多いです。

用途

R/G/B の強さを直接調整したい
R/G/B の単色だけ使いたい。
特定の色チャンネルだけ操作したい（例：青成分だけ暗くする）

HSV（Hue / Saturation / Value）

画像編集でよく使われる色空間。直感的に操作できる人が多い。
HSL と似ているけど、明るさの定義が違う。V（Value）は RGB の中で最大の値が明るさになる。

HSV の値

H（Hue＝色相）
S（Saturation＝彩度）
V（Value＝雑明度＝最も強いRGB成分の値）

Vは明度と呼ばれることが多いですが、人間が感じる明度そのものではありません。

図にも描いたんですが、白と純赤が同じ明度ということになってしまっています。白と赤を同じ明るさって言われても…違和感を感じませんか？

なぜ私が雑明度と呼ぶに至ったか下記のValueのセクションに書いています。

Hue

Hueは色相を変更する

赤（０）から始まり、黄色、緑、青、紫、赤（１）と戻ってくる。

RGBノードの色相環の値は見た目とは違う割合になっている

Saturation

Saturationは彩度を変更する

RGBの設定画面では彩度を上げると色相環の外側へ移動し、鮮やかになる。彩度を下げると中心へ移動する

白はSaturationが０になる。

HSVの図で見ると黒でもSaturationは１にできるはずだが、RGBノードで設定すると、真っ黒だと最終的にSaturationは０になっている。少し謎の挙動。

Value

Valueは色の明るさを変更する

しかし、Value０のとき黒しかないのに、１のときは純色と白の混色が入っています。

人間は白と純色の青を見たとき、白の方が明るいと感じますが、HSVのVはそのような人間が感じる明るさをベースにしているのではないということです。

例えば上の図のような色をRGBで表したとき、Gが0.6で一番明るい色だったとすると、HSVのVにはその値がそのまま入ります。

Ｖ＝max(R, G, B)

すごく適当じゃないですか？判定が雑。だからただの値と考えるか、雑明度と呼んだ方が誤解がない気がします。

特徴

鮮やかさ（彩度）、色相など調整したい項目を直接操作できる
明るさは人間の感じる自然な指標ではないので、HSVで明度をいじってもあまり自然な変化にならない

右画像はVの値を加算したり減算してみたものです。

Vを足しても絶対に色が消えないので明らかに不自然な画像になります。

用途

Photoshop の「色相・彩度」操作に近い感覚で扱いたいとき
色相だけ変えて使いたい・色のバリエーションを作りたいとき

HSL（Hue / Saturation / Lightness）

人間にとって（比較的）自然に感じる色空間。
Hue（色相）、Saturation（彩度）、Lightness（明度）。

HSL の値

H（Hue=色相）
S（Saturation=彩度）
L（Lightness＝明度、またはニセ輝度）

HueはHSVのときと同様に色相変化です。Saturationも彩度変化という点では同様ですが、HSVのときと計算法が違うので同じ値が出るわけではありません。

Lightnessはネット上の記事で「輝度」と訳されることが多いです。が、正しくは明度と呼んだ方が実態を表していると思います。どうしても輝度と呼びたい場合はニセ輝度と呼ぶと良いと思います。人間の目に自然に感じる明るさではなく、白ー純色ー黒の間を数値化しているだけで、物体の色としての明度を表しているのに近いです。

Lightness

右図は同色をRGB、HSV、HSLで表したものです。

HSLのLはRGBチャンネルの一番大きい値と小さい値を足して割ったものになります。

右の図のRGB（0.2, 0.6, 0.1）でいうと、大きい値0.6＋小さい値0.1＝0.7を２で割って、L＝0.35となります。

L ＝ (max(R, G, B) + min(R, G, B))/2

Lightnessの明度は黒ー純色ー白まで変化させることができます。

Lightnessは色の明るさとして明度と呼ぶべきとは言いましたが、黄色と青を比較してみると、同じLの値の色同士を比べると、やはり黄色の方が明るく感じるので、人間が感じる自然な明るさ（輝度）の指標ではありません。

その色の明るさと考えて明度と言うとまぁちょうどいいのかなという意味で明度と呼ぼうという感じです。

HSVとの比較

HSを同じ値にしてV、Lを変化させるとHSLの方が白まで明るくなります。

HとV、Lを同じ値にしてSを変化させるとHSLの方が明るく鮮やかになります。（特にLが0.5のとき）

特徴

右図はLightnessを減算・加算してみたもの。HSVのVよりはマシですが、明度を上げると緑が蛍光色のようになったり、不自然な点は残っています。

用途

色の方向（Hue）だけを回したい
物体色のバリエーションを作りたい。色の明るさを変えたい

Hueを回転させる場合は、１以上にならないようにModuloノードをはさむと良いです。

YUV（Luma + Chrominance）

テレビ放送や映像圧縮でよく使われる。テレビのモノクロ互換を維持しつつカラー情報を送るために作られた色空間。
Y = 疑似輝度（明るさ、モノクロ情報）
U/V = 色差（Chrominance＝色の情報）

YUV の値

Y（Luma＝疑似輝度）
U（青方向の色差）
V（赤方向の色差）

YUVはYが疑似輝度を表し、ＵＶで色を表現します。ＵＶで色を決めてからＹでその輝度（明るさ）を上下させることで全色を表現することができます。

Y（Luma）

Yは人間の明るさ知覚に合わせて重みづけした擬似輝度

輝度とは一般的にLuminance = 物理的な輝度（光の強さ）を表しますが、YUVのY（Luma） = デジタル信号としての擬似輝度なので輝度そのものではありません。ですがBlenderで輝度を調整しようとするとこのYの値を変更することになります。

Y = 0.2126R + 0.7152G + 0.0722B

Yは上の式で算出されます。これは色によって輝度への重みが違うということを表していて、Gが強いほど明るくなるということでもあります。

なので右図のように、黄色と白のYの値が同じ程度になっている。色の濃さや強さではなく色の明るさで疑似的に輝度を出しています。

特徴

人間の目は明るさに敏感で色には鈍い → 色差信号だけ圧縮できる
CGというより映像・放送向けの空間
画像の明るさ調整

Yの値を加算減算していくと画像が比較的自然に明るくなったり暗くなったりします。色の変化も自然に見えます。

RGBは無駄

「貴様は今まで見た景色の色数を覚えているのか？」

いきなりジョジョネタですいません。とにかく、あのときあの景色は少なくとも50000色はあった、なんて覚えてる人はいないと思います。

でも明暗は結構覚えてますよね。室内が明るい、暗い、空が晴れてた、曇ってた、夜、朝、など。人間の目は明暗の違いをよく覚えていますが、微妙な色の違いはあまりわからない。だから RGB で色を含めた全情報を送ると無駄が多いというわけです。

しかし、YUV、YCbCrだと、明暗（Y）と色情報（U,V／Cb,Cr）が別れてますので、色情報を圧縮して効率的に送れる。元は白黒とカラーの互換性のために生まれた色空間ですが、テレビの電波の帯域幅は狭く、ノイズも乗りやすいため効率も重視されています。こういうわけで放送業界ではこれらの色空間が使われるようになりました。（なお、テレビでは送信はYUVですが、最終的にはブラウン管や液晶でRGBとして表示されます。）

用途

輝度だけ強調したい
テレビっぽい色調調整
白黒にする

色の成分だけをUVに集約させているので、UVを０にすることで色の明暗を維持したままモノクロ画像にすることができます。

HSVやHSLでSを０にしてモノクロにすることもできますが、色の明暗が維持されないので、元の画像とは印象が違うものになります。

YCbCr（Luma + Blue-difference + Red-difference）

YUV の派生で、デジタル映像規格や JPEG圧縮で使用。

Cb = 青系の色差、Cr = 赤系の色差。

YCbCr の値

Y（Luma＝疑似輝度）
Cb（Chroma Blue-difference＝青方向の色差）
Cr（Chroma Red-difference＝赤方向の色差）

大体YUVと一緒です。CbCrで色を作ってYで明暗を決定します。

モード

YCbCrには以下のモードがあります。

ITU601
- 古いテレビの規格
ITU709
- HDや現代テレビ・動画の規格
JPEG
- 601に近いけど画像圧縮の規格

変換係数が少し違うので、似てますが若干色の出力が違います。

特徴

JPEG や動画で使われる標準仕様

用途

YUV とほぼ同じだけど、
「より JPEG/映像向けの正確な変換」が必要なときはこちら。

RGB/HSL/HSV/YUV の違い

RGB：基本的な色空間・コンピュータ的（光の成分）
HSV：操作が直感的（Value＝最大成分）
HSL：人間の感覚的（黒から白まで明度がある）
YUV : 輝度を調整できる（色の明るさがちゃんと輝度に反映されている）

色の変化で迷ったら：

色の種類を動かしたい → HSL or HSVのHue
輝度が欲しい、画像の明るさを調整したい → YUV or YCbCr（Y成分）

明度とか輝度とか名前が被ってることが多いんですが…

わかりにくいですよね。

HSVのValueは雑明度、ただの色の強さ。
HSLのLが明度。輝度としてはニセ輝度。
YUVのYは疑似輝度だけどBlenderではもう輝度って呼んでいいと思う。

結局輝度を上げたいときはどうしたらいいのか

YUVやYCbCrのY（Luma）という疑似輝度がありましたが、結局何を調整したら自然に明るくなるのでしょうか？

Blenderには他にも

Exposure
Brightness

という調整パラメータがあります。

Exposureはカメラのパラメータだと露出や露光で、光量を増やすことができますが、BlenderではRGBの値を乗算で増やしていくだけです。なので色によっては不自然に残ってしまったり、自然な見え方にならない場合もあります。

対してBrightnessはRGBに同じ値を足していくだけですが、YUVなどのY（Luma）の変化と出力結果が似ています。

というわけで、一気に画像を明るくしたいときはBrightnessが便利ですが、色ごとに調整したいときはYUVやYCbCrなどを使うと、比較的自然に明るさが調整できるかもしれません。

※実際にリアルに光が増えたように見せるためにはライトを増やすとか、RGBカーブやコントラストなど様々な調整法で調整する必要があります。ここではあるパラメータ単体で見た場合、のことしか言っていませんのでご注意ください。

なんでBrightnessとYの変化が似るのか。

Luma の式：

Y = 0.2126 R + 0.7152 G + 0.0722 B

Brightnessの計算式、RGB 全体に +b すると、

R' = R + b
G' = G + b
B' = B + b

これを Luma に入れると…

Y' = 0.2126(R+b) + 0.7152(G+b) + 0.0722(B+b)
    = (0.2126R + 0.7152G + 0.0722B) + b(0.2126 + 0.7152 + 0.0722)
    = Y + b(1.0000)

Luma(Y) は b がそのまま加算される

つまり、RGBに同じ値を足す → Luma も同じ値だけ増えるということになる。

なんだ、じゃあYUVで輝度を増減してるのってRGBに同じ数を足し引きしているだけなのか…。

※モノクロ化するときには「輝度に寄与する重み」で合成しないと正しいグレースケールにならないのでYUVの計算式は必要になります。