HSL色空間のすすめ

 

HSLとHSVの違いを非常にざっくり説明すれば

 

H:同じ

HSLのS:灰色を足す

HSVのS:白色を足す

HSLのL:左半分で黒を足して右半分で白を足す

HSVのV:黒を足す

 

ということになります。

 

下図は左がHSL、右がHSVです。

 

f:id:syougisyougi:20200522113453j:plain
f:id:syougisyougi:20200522113456j:plain


やや分かりづらいですが、HSLの場合は上図のSを一番左に動かすと白:黒=1:1となり、HSVの場合はSを一番右に動かすと白:黒=100:30になります。なのでSの一番左端はHSVの方がやや明るいです。

 

ここは手元にペイントソフトがある場合は自分でいじってみるとわかりやすいと思います。

 

すなわち、HSLを使うと何ができるのかというと色に灰色を足すことが簡単にできます。

 

HSVでは白を足すか黒を足すかしかできませんが、HSLでは白を足すか黒を足すか灰色を足すかの三通りが選べるので、その分特定の調整をしたい場合に必要となるバーの移動回数が節約できます。

 

これがHSLのメリットです。

 

じゃあどこが欠点なのかというと、HSLの方がHSVより表現できるRGBの数が少ないことです。

 

まず、RGBでは256^3通りの色を表せるわけですが、HSLとHSVではそれぞれ最大で360*101*101通りの色しか表すことができません。

 

ここで、HSVの場合は異なるHSVには必ず異なるRGBが対応しているのですが、HSLの場合には異なるHSLに対して同じRGBが対応してる部分がかなりあります。

 

例えば、HSL(0,76,90)とHSL(0,78,90)はどちらもRGB(251,208,208)として出力されますが、HSVではそのようなことは生じません(たぶん)

 

つまり、HSLの方は表現できるRGBの幅が狭いです。*1

 

ただ、それがどの程度デメリットになるのかというと個人的にはほとんどデメリットになりえないと考えています。

 

なぜなら、普段色を塗る時は様々な効果のレイヤーを使うわけで、それで色を調整できることを踏まえたらHSVでもHSLでも256^3通りの色を事実上表現できるからです。

 

言い換えれば、結局のところHSV、もしくはHSLで入力した場合に入力できるRGBの数が最大で360*101*101しかないというだけで、実際の画面に表示できる色の数は256^3だからです。

 

分かりづらいと思うので具体例を出しますと、普通のレイヤー(RGB=(a, b, c))に乗算レイヤー(RGB(A, B, C))をかぶせた場合に出力されるRGBは(a*A/256, b*B/256, c*C/256)です。

 

このような場合、abcABCとして与えられる数字の組み合わせが少なくなったところで、最終的に出てくるRGBの組み合わせはほとんど変わりません。(小数点部分が丸められてしまうので)

 

実際には乗算レイヤー以外にも様々な計算式をもつレイヤーがあるわけですから、それらを組み合わせればまず間違いなく256^3通りの色を表すことができます。

 

また、HSLの方が表現できる色が少ないといっても、人間の目が違いを識別できる範囲内では十分です。RGB(0,0,0)とRBG(0,0,2)の違いなんて普通わからないです。

 

暗めの青い色が欲しいなぁとなったときに頭の中で想像した色がRGB(34,54,187)だったと仮定して(当然その色がRGB(34,54,187)だということを本人は知らない前提です)、HSVではそれがぴたりと出力出来て、HSLでは(32,56,187)しか出力できませんとなったところでほとんど何も変わりません。(32,56,187)を見て「あ、この色が欲しかったんだ」となって終わりでしょう。

 

加えて、細かな違いがわかってしまい修正したくなる人――そんな人は配色論一筋で食ってる専門家くらいだと思いますが――はHSVにしろHSLにしろRGBでの調整を強いられるわけですから(∵HSVでは表現できないRGBもあるので)HSLの方が調整をする機会が多くなるくらいの違いしかありません。

 

従ってHSLの方が少し表現できるRGBが少なくなったところでほとんどデメリットはないわけです。

 

よって、序盤で述べたHSLでは白を足すか黒を足すか灰色を足すかの三通りが選べるというメリットを非常に少ない損失で享受できるのです。

 

なので僕はHSLをなんとなーく使い続けています。

 

*1:雰囲気で言えば、HSVでは白をどれくらい足すか、黒をどれくらい足すかがそれぞれ100通りの中から選べますが、HSLではそれぞれ50通りの中からしか選べません。その代わり灰色をどれくらい足すかが100通り選べるようになっているわけですが、その際に灰色を76足すのと78足すのが結果的に同じRGBになってしまうせいで表現できるRGBの数が減っています。数式で表すとHSVでは100*100ですが、HSLでは100*50(or50*50+50*50)みたいな感じになります。ただ、誤解がないように書いておくとHSLでもHSVでも表現できる幅の上限と下限は同じです。何が違うのかと言えば密度です。