HSLって何？ | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

こんにちは、WEBプログラマーコースの池田駿です。

テスト週間が明け、久しぶりの勤務となりました。

本日もユニット制作を行っていたのですが、本日の自分的テーマは「色」でした。

よく使われる色の表現には二種類あり、一つが「RGB」で、もう一つが「HSL」です。

RGBは聞いたことのある方も多いのではないでしょうか？

Rが赤、Gが緑、Bが青を表しており、それぞれが256段階です。

これらの値の組み合わせで色を表します。

なぜ256なのかというと、コンピュータのメモリは8ビットが1つの単位になっていて

（これを1バイトといいます）、8ビットで表せる種類が2⁸=256種類なので256になりました。

ちなみに色を#87cefaのように表すときがありますが、これはカラーコードと言って、

この6ケタの数字が一つの色に相当します。

ここでおい！数字じゃなくてaとかfとか入ってるぞ！と思った方、鋭い！

これは10進数ではなく16進数です。つまり9の次がa,b,...と続き、10進数の15がf、

10進数の16が10です。

さて、本題のHSLです。RGBは3次元のパラメータでいわば空間座標を表していますが、

それに対してHSLは極座標で空間を表しています。

高校の時極座標を習った方も多いと思いますが、

あれは二次元なので原点からの距離と始線からの角度で座標を表していました。

では立体はというと、これにz軸を加えるだけです。

HSLのHはHue（色相）、SはSaturation（彩度）、LはLightness（輝度）であり、

これを組み合わせて色を作るわけです。

彩度、輝度は線形なので輝度がz軸、彩度が距離です。

そして色相を360度で表現します。赤の反対は青で、その間に紫がある...といった感じです。

HSLのメリットは人間の感覚とマッチしているところです。

正直、赤と緑と青をどんな割合で混ぜたらどんな色になるのか、イメージするのは難しいですよね。

しかしどの色相で、どのくらい明るくて鮮やかか、というのはイメージ可能です。

WEBサイトをはじめとしたマルチメディアは機械にとっての扱いやすさと、

人間の感覚への近さのバランスで出来上がっているんですね！