Web制作のための
HSL / HSV 基礎知識

HSL/HSVカラーモデルとは

RGBカラーモデルの派生ともいえるものが、HSL、そしてHSVと呼ばれる２つのカラーモデルです。

これがWeb制作では、結構隠れたポテンシャルを持っている面白いモデルです。よくわからないしとっつきにくいと感じる方もいるかもしれませんが、理屈を理解すれば、とても直感的に色を指定できるものだということがわかると思います。

HSLカラーモデル

HSLの各アルフェベットが表す意味は

  • H : Hue、色相
  • S : Saturation、彩度
  • L : Lightness、輝度

です。

Hue ヒュー、その色がその色たる数値

ヒュー（色相）はH、S、Lの中で最も重要なパラメーターで、とても大雑把に言えば「何色か」を決める要素です。カラースペースの国際標準を規定している国際照明委員会によるとヒューとは

the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, orange, yellow, green, blue, violet

(“Color Appearance Models: CIECAM02 and Beyond”. )

つまり、「赤やオレンジ、黄、緑、青、紫と言ったとある刺激と似ている、もしくは異なっているとみなすことのできる、ある特定の刺激を示す度数」

と言い表されています。

…… いやあ、それは一般的な意味で言うところの「色」ですね。もちろん色そのものを紐解くカラーセオリーの世界では、一般人が単語として使う「色」を用語に置き換える必要があるのは、理解できるのではと思います。

Saturation サチュレーション、その色がどれだけ純粋かの数値

サチュレーション（彩度）はちょっと分かりにくい不思議な単語です。

いえ、対応する日本語として通常使われている「彩度」はとても分かりやすいですね。鮮やかさを指す用語だと一目でわかります。

しかし、ちょっと待ってください。 

「saturation」とはそもそも日本語では「飽和状態」「満ちている」という意味の英単語です。

 This room is saturated with coffee aroma.

なんて言うと、この部屋はコーヒーの香りで一杯だ、という意味になります。しかし、飽和していることと、鮮やかさがどう関わってくるのでしょうか。

ここで言うサチュレーションは、その色がどれだけ純粋（ピュア）で混じり気のないかを指します。１００％が純色で、０％が濁って元の色がない灰色になります。

どれだけ鮮やで主張が強い色（vivid, intense）であるか、というのは結果的に表現としては間違いないです。しかし本来は、「１００に近づけば鮮やかな色になり、０に近づくとくすんだ色になる」というよりは、

「１００％がその色の要素がフルで詰まった（サチュレーテッドな）基準色で、値が下がるほどその純粋さが失われる」

であると考えた方が、あまりにも自由すぎるカラースペースの世界で、色を決める一つの指針ができやすいのではないかと思います。

Lightness ライトネス、その色がどれだけ照らされているかの数値

ライトネス（輝度）は、言葉が表す通りです。感覚的には「明るさ」といっても問題ないでしょう。１００％が白で、０％が黒になります。

実際は色自体が光り輝いているわけではないので、その色に光源を充てられている度合いと言い換えられます。

そこまで難しく考える必要もないです。ものすごい明るい光源を照射されたら、その物体の色は白飛びしますね。一方で、何も光が当たらない暗室でその物体を見たら、真っ黒でしょう。

色そのものだけを見ていった場合、５０％が基準色で、１００％に向かうほど白の絵の具の比率が上がり、最終的に白そのものになる、０％に向かうと、黒の絵の具の比率が上がり、最終的に黒そのものになるということです。

そう、サチュレーションは１００％がその色の基準でしたが、ライトネスは５０％がその色の基準なんですね。とはいえ、ライトネスの方が、頭で理屈を理解はしやすいと思います。

HSVカラーモデル

特定の色を、ヒュー、サチュレーション、ライトネスの３パラメーターで指定するHSLカラーモデルと非常によく似た方式で、HSVカラーモデル、というものがあります。

HSVの各アルフェベットが表す意味は

  • H : Hue、色相
  • S : Saturation、彩度
  • V : Value (もしくはBrightness) 、明度

です。上２つのHとSは同じですが、最後だけ違いますね。正確に言うと、他の値の意味もHSLとはほんのり変わっていますが、ひとまずそれらは同じと考えて、Vを見ていきましょう。

Value バリュー、その色がどれだけ光を反射するかの値

バリュー（明度）は、その色がどれだけ明るいか、暗いかを示すパラメーターです。

…… それでは、ライトネスと同じですね。

もしライトネスとバリューが同じ意味であれば、HSLもHSVも同じカラーモデルになってしまいます。それでは、どこが違うのでしょう。

ライトネスは、光がどれだけ当てられて明るく、暗くなっているかを示していました。

一方でバリューは、その色が、どれだけ光を吸収しているか、反射しているかを示しています。つまり、１００％がそのヒュー（色相）の基準色として、０％に向かうほど、その色は光を反射せず吸収していくようになります。

最終的に０％、つまり全ての光を反射せず、吸収してしまうと、ブラックホールが黒いのと同じ原理で、その色は黒くなります。

バリュー（明度）は、その色がどれだけ明るいか、暗いかを示すパラメーターです。

…… それでは、ライトネスと同じですね。

もしライトネスとバリューが同じ意味であれば、HSLもHSVも同じカラーモデルになってしまいます。それでは、どこが違うのでしょう。

ライトネスは、光がどれだけ当てられて明るく、暗くなっているかを示していました。

一方でバリューは、その色が、どれだけ光を吸収しているか、反射しているかを示しています。つまり、１００％がそのヒュー（色相）の基準色として、０％に向かうほど、その色は光を反射せず吸収していくようになります。

最終的に０％、つまり全ての光を反射せず、吸収してしまうと、ブラックホールが黒いのと同じ原理で、その色は黒くなります。

デジタル制作のためのカラーリファレンス