HSL、HSBの違いについて〜Vectornator外伝。

〽️ 未知のパラメータ、HSL。〽️ 成分。〽️ HSBの彩度と明度。〽️ HSLの彩度と輝度。〽️ RGB値からの算出。〽️ サンプル表を使ってください。

Vectornator 使い方。

2020.01.01
モバイルでベクター画像作ろうよ。

⬆︎Vectornator使い方についてのまとめページはこちら。

未知のパラメータ、HSL。

こんにちは、「ふ」です。
VectornatorをはじめとするCGアプリのブレンドモード（描画モード）にはRGB値を使った効果とHSL値を使った効果が存在します。

未知のパラメータ。

HSL？？聞き慣れないパラメータですね。
HSB（HSV）ならわかるけど・・VectornatorのカラーピッカーにもHSBスライダーが用意されています。
ブレンドモードを学習する上では、この「HSL」をある程度理解したまま進めていきたいところです。

そこで。今回は「Vectornator使い方、外伝」と称して、HSLとHSBの違いについて紹介しておきたいと思います。
ちなみにHSLでネット検索した日には「色空間」などの難解なものが登場しますが、当記事では必要な部分だけ「さらっと」いきます。

目的。

・ブレンドモードを使いやすくするために、HSBとHSLそれぞれの性質について最低限理解しておく。

・HSBのスライダーをつかってHSLをある程度コントロールできるようになる。

〜この辺のスタンスで進めようかと思います。
Vectornator以外のCGアプリを使っている方も、参考にしてみてください。

成分。

HSBとHSLのそれぞれを構成するパラメータを見ておきます。

◼︎ HSB

H:色相（hue)　 0°〜360°
S:彩度（saturation）　0%〜100%
B:明度（brightness）　0%〜100%

◼︎ HSL

H:色相（hue)　 0°〜360°
S:彩度（saturation）　0%〜100%
B:輝度（Luminance/Lightness）　0%〜100%

パラメータの項目だけを見ると、似たもの同士にも思えますが‥

色相は共通。

このうちH（色相）については、HSB/HSL共通のパラメータで、「色合い」を決定します。値は0°〜360°という角度的に表現されます。
これに関してはVectornatorのカラーピッカーにあるスライダーで指定が可能ですね。

問題はHSBの「彩度」と「明度」、HSLの「彩度」と「輝度」。
名前は似ているのですが、その性質は異なります。

今回は、完全な赤（R:255 G:0 B:0）を基準となる色「純色」として、それぞれの違いを見ていきましょう。

HSBの彩度と明度。

先程の純色（H:255 S:0 B:0）を基準に、HSBの色サンプルを用意しました。

縦軸をS（彩度）、横軸をB（明度）としています。
純色をHSBに変換すると彩度100%、明度100%と成増。サンプル表の右上のものがそうですね。

HSBのB（彩度）は「色の濃さ」を指定します。
「色の濃さ」とは、RGBのMAX値に対して他の成分がどれだけ離れているかで決まります。B = 100%のときが純色の距離。

彩度を下げていくにつれ、MAX値に他の成分が近づいていきます。最終的に0%になるとそのときのRGB値は全てがMAX値と同じになり、MAX値を基準としたモノクロに成増。
今回は（R:255 G:0 B:0）を純色としているので、B = 0%の時のRGBは（R:255 G:255 B:255）の状態ですね。

B（明度）は100%が純色の明るさ。下げていくにつれ、RGB値の各成分が0に近づいていきます。
最終的に明度が0%になるとそのときのRGB値は黒（R:0 G:0 B:0）となるので、明度0%の場合は彩度の値に関わらず黒に成増。

HSB値の操作。

・純色：彩度100%、明度100%。

・明るくしたい（白に向かいたい）とき：
→彩度を落とし、明度を上げる。

・暗くしたい（黒に向かいたい）とき：
→明度を下げる。

HSLの彩度と輝度。

今度は純色（H:255 S:0 B:0）を基準に、HSLの色サンプルです。

縦軸をL（輝度）、横軸をS（彩度）としています。
純色をHSLに変換すると彩度100%、輝度50%（！）と成増。サンプル表で、L軸の中央からS軸を出しているのはそのためです。

HSLのS（彩度）はHSBのそれとは違い、「色の鮮やかさ」を指定します。
「色の鮮やかさ」とは、RGBの各値の「分布の広さ」によって決まります。B = 100%のときが純色の広がり。

彩度を下げていくにつれ、RGBの平均値に各成分が集まっていきます。最終的に0%になるとそのときのRGB値は全てが平均値に同一になり、純色RGBの平均値を基準としたモノクロに成増。今回は（R:255 G:0 B:0）を純色としているので、B = 0%の時のRGBは（R:127 G:127 L:127）の状態ですね。

L（輝度）は50%が純色の明るさ。これがHSBのB（明度）との大きな違いです。
50%から下げていくにつれ、RGB値の各成分が0に近づいていきます。また、50%よりも上げていくにつれ、各成分は255に近づいていきます。

最終的に輝度が0%になるとそのときのRGB値は黒（R:0 G:0 B:0）となり、輝度100%になると完全な白（R:255 G:255 B:255）と成増。0%と100%のときは彩度の影響を受けません。