HSL

「Hue, Saturation, Lightness」の略です。

HSLは、RGBカラーモデルと同じように、3つの属性の組み合わせとして色を定義するカラーモデルです。まず色相環上の位置を指定し、彩度と明度を調整して最終的な色を作ります。色を少しだけ調整しやすいため、グラフィックデザイナーやWebデザイナーがよく使用します。カラーピッカーを使う必要がないからです。

RGBカラーモデルのように他の色の組み合わせとして色を表すのではなく、HSLは色相、彩度、明度という3つの属性を使って色を定義します。

• 色相は、0～359ºの数値で表される色相環上の角度位置です。純粋な赤は色相環の最上部にあり、角度の値は0ºです。シアンは反対側の180ºにあります。
• 彩度は、0～100%の割合で表される色の鮮やかさです。彩度が0%になるとグレーになります。
• 明度は、0～100%の割合で表される色の明るさです。明度が0%だと黒、50%だとその色自体、100%だと白になります。

HSLカラーモデルは、形式が異なるだけで、RGBと同じ範囲の色を作成できます。たとえば、RGB値がR:166、G:242、B:242または(16進数の値#A6F2F2）の明るいシアンは、色相180º、彩度75%、明度80%の色と同じです。画像編集ソフトがHSLを使用する場合でも、デジタル画像ファイルは色の情報をRGB値として保存します。

HSLは、色を数値の組み合わせとして定義する、より直感的な方法と考えられています。Webデザイナーは、微調整を簡単にするため、RGBの代わりにHSLを使ってCSSで色を指定することがよくあります。たとえば、WebデザイナーがCSSコードhsl(180, 75%, 80%)を使って色を指定した場合、明るさの数値を小さくすることで暗くできます。RGB値を使って同じ調整を行う場合は、3つすべての値を異なる量だけ変更する必要があります。

NOTE: HSLカラーモデルはHSBモデルに似ています。HSBは色相に同じ計算方法を使いますが、明度の代わりに輝度を使います。輝度では、100という値が白ではなく完全な色を表し、彩度の計算方法にも影響します。