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

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







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

未知のパラメータ、HSL。


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

未知のパラメータ。

HSL??聞き慣れないパラメータですね。
HSB(HSL)ならわかるけど・・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 L:0)を純色としているので、B = 0%の時のRGBは(R:255 G:255 L: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のB(彩度)はHSBのそれとは違い、「色の鮮やかさ」を指定します。
「色の鮮やかさ」とは、RGBの各値の「分布の広さ」によって決まります。B = 100%のときが純色の広がり。

彩度を下げていくにつれ、RGBの平均値に各成分が集まっていきます。最終的に0%になるとそのときのRGB値は全てが平均値に同一になり、純色RGBの平均値を基準としたモノクロに成増。今回は(R:255 G:0 L: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%のときは彩度の影響を受けません。

HSB値の操作。

・純色:彩度100%、輝度50%。

・明るくしたい(白に向かいたい)とき:
→輝度を上げていく。

・暗くしたい(黒に向かいたい)とき:
→輝度を下げていく。





 

RGB値からの算出。


HSL値の彩度と輝度は、RGB値を使って算出することもできます。

輝度についてはRGBの各値を一定の比率で足していきます。

輝度Lの求め方
L = 0.298912*R + 0.586611*G + 0.114478*B

HSLの彩度はRGBの最大値と最小値から算出されます。

HSLの彩度Sの求め方

輝度が50以下のとき:
S = (MAX値 - MIN値)*100 / (MAX値 + MIN値)

輝度が50以上のとき:
S = (MAX値 - MIN値)*100 / (510 - (MAX値 + MIN値))

輝度の値が50以上か50以下かによって、計算方法は変わってきますので注意してください。

もし厳密にHSL値を扱いたい時は、この数式を使って算出するようにしてください。





 

サンプル表を使ってください。


HSBとHSLの違い。拙い説明でしたが、参考になりましたでしょうか?
両者を比較しながらであれば、HSBパラメータを使ってある程度HSLパラメータをコントロールすることもできます。

今後HSLベースのブレンドモードをHSBスライダーで操作したい時にはこの2つのカラーサンプルを是非ご参考ください。


扨(さて)次回からは「Vectornator使い方」は本編に戻り、HSLベースのブレンドモードについて探っていきたいと思います。おたのしみに〜











関連記事











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧