JUNK Renno

HSLのかいせつ。

■HSLとは

テーマが非常に抽象的な上に書いてるヤツが素人なもので、内容は必ずしも正確ではありません。
あー、いつものことか。

前にRGBについて「コンピュータにとって色とは光のことであって、三つのライト（赤-red、緑-green、青-blue）の強弱で表している」と書きました。
これはコンピュータにとっては非常に都合のいい仕組みではありますけれども、私たち人間にとってはぜんぜん優しくありません。
全部暗記してる一部のケッタイな人を除き、光を足し算するなんて色の混ぜ方をしたことは、あまり無い筈です。

で、数字で指定できるメリットを残しつつ、RGBよりもイメージがしやすい色の並べ方が考案されました。
それがHSV(HSB)であり、さらにHSVの弱点を改良したものがHSLです。




■イメージモデル

RGBの各パラメータはそれぞれの要素の単純な強度でした。
それをX,Y,Zの座標とみなせば、空間内に立体がプロットできることになります。
例えばこんな風。




こういうのを色空間のイメージモデルとか言ったりします。
この画像ではわざと隙間を目立たせています。RGBでは立方体になりますね。

同様に、まずHSLのイメージモデルを見てください。



描き方があまり良くなくてすみませんが、円錐を二つくっつけたような形になります。
ピッカーの三角形をくるっとひっくり返して、色ごとに回転させる感じですか。




■パラメータ

RGBでは各要素が0～255の間でしたが、HSLでは通常
H＝Hue,色相：0～360(360は0と同じ)
S＝Saturation,彩度：0～100%
L＝Luminance((Lightness),明度：0～100%
の値を取ります。S、Lの値は、たまに0～255になるソフトもあります。ちなみにWindows標準の「色の編集」ダイアログでは、何故かHSLすべての値が0～240までになっていますが、理由は謎です。




それぞれについて補足説明。

H：色相は「どんな色か」を指定します。
似たような色をうまく並べていくと輪になるというのは昔からよく知られていまして、「色相環」といいます。
それを利用して赤を起点(0)とし、「角度」で色を指定しようというのがこの値です。角度ですから360度回ると元に戻ります。

S：彩度は「色の鮮やかさ」を示し、無彩色（グレー）から純色（最も鮮やかな色）までの範囲です。HSLではLが50%のとき、最も鮮やかな色になります。

L：明度は「色の明るさ」です。どんな色でも、0%が黒で、100%が白になります。


■利点

ではHSLを使うと何が嬉しいのか？　っていうことなんですが。



１.トーンを合わせられる
他はいじらずHの値だけを変えることで、同じトーンの違う色がすぐに作れます。

２．グラデーションを作りやすい
Lだけをいじれば、同じ色の明るさだけを変化させられます。

３．類似色・反対色が判りやすい
類似色はHが近ければ近いほど似ている、ということになります。
反対色（いちばんケンカする色）はその色とHが180度違う位置にあります。

最終的にはソフト内部でRGBに変換されるわけですが、その手間よりもユーザーに利点が多いということですね。

閲覧推奨リンク
色空間についてのまとめメモ {+ 情報::色}


追記：

■HSLとHSVの違い

少し書き方が悪かったのか、「HSVはHSLの別名」という理解の方がいらっしゃるようです。
HSLとHSVは系統(考え方)は同じですが、明度の定義が違います。なので、イメージモデルも変換式も別のものになります。
アヒルは鴨を家畜化した鳥ですが、系統は同じだからといって「アヒルは鴨の別名である」と言ってしまうのは乱暴です。


ちなみにHSVのイメージモデル



下側から見ると




HSVの弱点は、V(Value,明度)が最大のときに原色になる、という点です。
つまり「白」と「青」が同じ明度で示されるので、通常の感覚と少しずれた感じがするのです。