サムネイル|300x300px|図1：HSL色空間（左列、aからd）とHSV色空間（右列、eからh）。最上段（a, e）はそれぞれの色空間を円柱で示した図であり、その他は各色空間の3つの成分のうち1つを固定して、残り2つを同時に示した2次元プロットである。 b, f は彩度（Saturation）一定の円柱側面（この図では円柱の最も外側）。c, g はHSLの輝度（Lightness）またはHSVの明度（Value）一定の断面（この図では円柱を2等分する水平の断面）。d, h は色相（Hue）一定の断面（この図では0度の赤とその補色である180度のシアンを結ぶ垂直の断面）。 HSL色空間（HLS色空間ともよばれる）とHSV色空間（HSB色空間とも呼ばれる）は、Hue（色相）、Saturation（彩度）と、HSLではLightness, LuminanceIntensityを輝度とするHSI色空間も存在する。LとIでは、定義がやや異なる。（輝度）、HSVではValue（明度）の3つの成分からなる色空間でありHSV色空間がHSB色空間と呼ばれる場合、BはBrightness（明度）を指す。これはValue（明度）と同値である。これらの色空間における「輝度」などの単語は、光学などの学術分野における定義とは異なることがある。詳細は後述される。、RGB色空間の非線形変換である。1970年代に、人間が色を知覚する方法により近い方法で色を表現できるよう設計された。2つの色空間はともに、上端が白で下端が黒の軸を中心に、各色相の中間色が放射状に配置された円柱形をしている。
HSL色空間における色の表現方法は、感覚的には絵具を混ぜて色を作る方法に近く、Lightnessの変化は、黒または白の絵具の量の変化に似ている。
例えば、「明るい赤」を作るためには赤の絵具に白の絵具を加えるが、このとき白の絵具を加えることはLightnessを大きくすることに相当する。HSL色空間において、純色は Lightness 50% の円周上の色であり、完全な黒と白はそれぞれ Lightness 0% と Lightness 100% の部分である。
一方、HSV色空間による色の表現方法は、光の下での色の見え方に近い。HSL色空間でLightnessが最大の色は「白」であるが、HSV色空間でValueが最大の色は、純色の物体に白色光を当てたときの色であるといえる。例えば、赤い物体に明るい白色光を当てると物体は「赤く」見え、白色光を暗くしていくと、物体は黒色に近づいて見える、ということに似ている。
これらの色空間では、3つの色成分が人間の色に対する知覚特性に十分には従っていないことが問題として指摘されることがある。これは、Lightness・Valueを固定してHueを変化させると顕著である。例えば、純色の青 と純色の黄色 は、HSLではともに Lightness 50% 、HSVではともに Value 100% であるが、青よりも黄色のほうがはるかに明るく感じられる。
基本となる考え方
HSLとHSVはともに円柱形の空間である（図2）。Hueは0度の原色の赤から始まり、120度の緑、240度の青を経て、360度すなわち0度の赤へと1周する。円柱の中心軸はともに、 Lightness 100% あるいは Value 100% の白の上端から、 Lightness 0% あるいは Value 0% の黒の下端、そしてその2色間を補完する灰色からなる。
どちらの色空間においても、加法混合の三原色と減法混合の三原色（赤、黄色、緑、シアン、青、マゼンタ）、そしてこれらの隣接するペアの間の線形混合色（純色）が、 Saturation 100% で円筒の最も外側に配置される。純色は、HSLでは Lightness 50% 、HSVでは Value 100% である。
純色に黒を混ぜても、HSL・HSVともにSaturationは変化しない。一方、純色に白を混ぜる場合、HSLではSaturationは変わらないが、HSVでは小さくなる。HSLのSaturationは、黒と白を同時に混ぜる場合に小さくなる。
このような彩度の定義では、暗い色（両モデルとも）や明るい色（HSLの場合）も「Saturation 100%」すなわち「最も鮮やかな色」とされ、「Saturation（彩度）」を「鮮やかさ」としてとらえる場合、直感に反する例えば、図2において両モデルの円柱の右下にある色 や、HSLの円柱の上部にある色 は、鮮やかであるとは言いがたい。。そこで図3のように、円柱の代わりに、半径方向にChroma（ある色をRGB色空間で表した際のその値の範囲に等しい。詳細は後述される）をとる円錐や双円錐を用いて色空間を表現することがある。このとき、半径方向の値が「Saturation」「彩度」と表現され、「Chroma」との区別が曖昧にされる場合がある。
後述されるように、Chromaの算出は、RGBからのHSL・HSVへの変換において有用である。
歴史
HSL色空間は、1938年にフランスの技術者ジョルジュ・ヴァレンシによって、白黒の（輝度信号のみを放送する）テレビジョン放送に色の情報を付加する方法として開発されたカラー映像に切り替えるにあたって信号の形式を全く異なるものにすると既存の受信装置では映像を受信できなくなるかもしれないが、従来の信号（白黒映像、すなわち輝度情報のみからなる信号）に色の情報を付け加えるだけであれば、既存の受信装置でも調整なしで映像を（白黒で）受信できる。。このような方法はNTSC、PAL、SECAMなど主要なアナログテレビ放送やデジタルテレビ放送で使用されており、コンポジット映像信号の基礎となっている。
テレビ、パソコン、プロジェクターの多くは、赤、緑、青の3色の光を、強さを変えながら組み合わせることで色を表現する（加法混色）。しかし、十分に経験のない者や、絵具による混色（減法混色）に基づく色の表現に慣れている者は、この方法では容易には色を表現できない右|フレームなし|300x300ピクセル 例えば、比較的鮮やかなオレンジ色（ R=217、G=118、B=33）の彩度を下げた色 を作りたい場合、Rを31減らし、Gを24増やし、Bを59増やさなければならない。。より直感的な混色に対応するため、1970年代半ば、パロアルト研究所とニューヨーク工科大学の研究者らは、コンピューターのディスプレイ技術にHSV色空間を導入し、これはその後1978年8月の Computer Graphics 誌で、アルヴィ・レイ・スミスによって正式に記述された。 サムネイル|図6：テクトロニクスは、1979年にHSLを最も早く商用化した。この図は、テクトロニクスが1983年にアメリカ合衆国で出願した特許に添付された、HSLの双円錐の形状を示した図。 翌1979年には、テクトロニクスが色の指定にHSLを用いたグラフィックス端末をSIGGRAPHで発表した。HSLはRGBよりも直感的であるという点だけでなく、RGBとの変換が高速で可能であり、1970年代のコンピューターでもリアルタイムで相互に変換可能であった点でも便利であった。
以上の背景から、HSLや類似の色空間は、後述のように画像編集やグラフィックソフトウェアで広く使用されるようになった。
RGBからの導出 サムネイル|図7：HSL・HSVの円柱モデルとLCH色空間の、RGBからの幾何学的な導出を表現した図。 サムネイル|RGB立方体とHSV円柱の幾何学的な変換を視覚化した動画。 サムネイル|RGB立方体とHSL円柱の幾何学的な変換を視覚化した動画。
色を構成する属性
HSL色空間やHSV色空間の表現に用いられる値は、国際照明委員会などによって定義される同名の学術的な概念と直接関係するわけではない。しかし、初めにそのような概念について確認しておくことは有益である。
色相（Hue） ある領域が、知覚される色（例えば赤、黄、緑、青）、あるいはそれらの2色の組み合わせに近いように見えるということに関する視覚的属性。 Radiance, Le,Ω（放射輝度） 単位立体角あたり、単位投影面積あたりの放射束。SI単位は ワット毎ステラジアン毎平方メートル （W sr−1 m−2）。 輝度（Luminance, Y または Lv,Ω） 放射輝度を波長ごとに重みづけして表される心理物理量。SI単位は カンデラ毎平方メートル （cd m−2）。輝度という用語は、 Yn を基準の白とする相対輝度 Y/Yn を指して用いられることがある。 ルーマ（Luma, Y'''） ガンマ補正された R', G', B 値の加重和で、Y'CbCrでのJPEGファイルの圧縮や映像信号処理に利用される。 ブライトネス（Brightness） 光源色における色の明るさの尺度。物理学的にいうと光の強度であり、上限がない。単に「明るさ」と訳されることもある。 明度（Lightness または Value） 同じ照明を受けて白色に見える領域の明るさに対する、ある領域の相対的な明るさ。物理学的にいうと物体の分光反射率に対応するため、1あるいは100という上限がある。物体色のみに使用される明るさの尺度。 カラフルネス（Colorfulness） 色の鮮やかさ（色の強さ）の尺度。クロマや彩度/飽和度が相対的な尺度であるのに対し、カラフルネスは絶対的な色みの量の尺度である。 クロマ（Chroma） マンセル表色系における色の鮮やかさ（色の強さ）の尺度。同じ明度の無彩色と比較した色みの量。絶対的な色みの量であるカラフルネスとは異なり、相対的な尺度である。 彩度・飽和度（Saturation） ある領域のブライトネスに対して感じられる相対的なカラフルネス。または明度に対して感じられる相対的なクロマ。
明度（Lightness）とクロマ（Chroma）がある白色の領域を基準として相対的に定められる指標であるのに対し、ブライトネス（Brightness）とカラフルネス（Colorfulness）は、通常、目に到達する光のスペクトル分布などの物理的特性を表す絶対的な指標である。周囲の照明の変化によってブライトネスとカラフルネスは変化するのに対し、明度とクロマはあまり変動しないため、物体表面の色の表現には後者がしばしば用いられる強い照明のもとで見た黒い紙と暗い部屋で見た白い紙では、黒い紙のほうが絶対的には明るい（輝度が高い）かもしれないが、黒い紙の色は「暗い色」、白い紙の色は「明るい色」と認識できる。このような場合においては、「暗い」「明るい」はLightnessで表現されているといえる。。彩度・飽和度（Saturation）は、ブライトネスに対するカラフルネスの比、あるいは明度に対するクロマの比のどちらとしても定義されうる。
これ以降、特に明記されない限り、Hue、Saturationなどの単語はこれらの学術的な用語とは異なるものとする。
基本的な考え方 HSL、HSVやそれらに関連する色空間は、幾何学的に導出することができる。そのような色空間は「一般化されたLHSモデル」のうちの特定の色空間であるといえる。
HSLとHSVの色空間を構築するには、まずRGB立方体（ R, G, B ∈ [0, 1] ）を、黒が原点、白がその真上になるよう傾け、黒と白を結ぶ軸の周りの角度について、赤を0度としてHueを定義する。その後、軸上でValueあるいはLightnessを定義し、さらに軸に直交する方向（水平方向）に軸を0、純色を1としてSaturationを定義する。 サムネイル|499x499ピクセル|図8：HueとChromaは、RGB立方体を「Chromaticity plane（色度平面）」に投影することで定義される。
Hue（色相）とChroma（クロマ）の導出 HSL・HSVやそれに似た色モデルでは、Hueと、この記事でChromaと呼ぶJoblove と Greenberg （1978）と同様。値を同様に算出するため、それらの値は各モデルで同一となる。
傾けたRGB立方体を黒と白を結ぶ軸に垂直な平面に投影すると、赤、黄、緑、シアン、青、マゼンタを頂点とする正六角形となる（図8）。ここで、平面の原点は黒とする。Hueは、赤の位置ベクトルと投影された点（ある色をRGB空間で示す点を平面に投影したもの）の位置ベクトルのなす角の大きさに近い値で、Chromaは、原点と投影された点の間の距離に近い値で、それぞれ表される後述の通り、これらが厳密に角度と距離によって定義されるのは、六角形を円に変形したあとである。ここで「Chroma」という言葉を使うことによって、 Joblove と Greenberg （1978）の論文内容と一致するだけでなく、この用語の精神測定的な定義にも沿う。Adobe Photoshop の「Saturation」ブレンドモードのようにこの属性が「Saturation」とよばれる場合もあるが、（Chromaと比較されるような場合には特に）混同できない。。
これらの色空間におけるHueとChromaは、いずれも平面に投影された六角形を基準として定義される。Chromaは、ある色を示す位置ベクトルの大きさの、そのベクトルを延長して最も外側の六角形と交わる点と原点との間の距離に対する割合（図8下の六角形における OP/OP' ）である。この割合は、ある色の R, G, B の値のうちの最大値と最小値の差、すなわち R, G, B の値の範囲を指している(R, G, B)で表されるある色に対し、RGBの各成分から同じ値だけ変化させた (R + m, G + m, B + m) で表される色は、傾いたRGB立方体の中で垂直方向に移動しただけの点であるため、平面上の同じ点に投影され、同じChromaをもつ。例えば、R = G = B となる無彩色の色は黒と白を結ぶ軸上にあり、常に原点に投影される。。ここで最大値、最小値、Chromaをそれぞれ M, m, C とそれぞれおくと、HSLやHSVに関する論文や書籍の多くには、それらを正式に記述した公式やアルゴリズムも書かれており、この記事で示される数式はそれらをまとめたものである。Agoston (2005) や Foley (1995) を参照されたい。
Hueは、投影された点を通る六角形の辺の全周の長さに対する、投影された点までの辺の長さの割合であり、当初は0以上1以下の値で定義されたが、現在では一般的に0度以上360度未満の角度で定義される。原点に投影される点（白、黒とその間を補完する灰色）に対しては、Hueは定義されない。数学的には、このことは次のように区分的に定義される。
サムネイル|250x250px|図9：HSLとHSVのHueとChromaの定義から、六角形を円に変形する図。 便宜上、無彩色のHueを0度とすることもある。 サムネイル|250x250ピクセル|図10：極座標変換より導出された H2, C2 では、六角形から円へ変形した場合の H, C との間にずれが生じる。 これらの定義から、六角形の各辺を60度の円弧にマッピングすることで、六角形を円に変換することができる。このような変換を行うと、Hueは原点周りの角度、Chromaは原点からの距離、すなわちある色の位置ベクトルが赤の位置ベクトルに対してなす角と、そのベクトルの大きさでそれぞれ正確に表せる。
画像解析ソフトでは、上述のような変形の代わりに、HueとChroma（それぞれ H2, C2 とおく）を直交座標の極座標変換によって定義することがある（図10）。これは、 αβ 座標を用いて次のように行うことができる。
ここで、atan2は2つの引数をとるarctanであり、直交座標の2成分から角度を計算する。
この方法と円への変形とを比較すると、Hue（ H と H2 ）はほぼ一致しており、どの色においてもその差は最大で約1.12度である（ H ≒ 13.38°, H2 ≒ 12.26° などの12か所で差が最大となり、30度の倍数では H = H2 ）。しかし、Chroma（ C と C2 ）については、Hueが60度の倍数となる位置では両者は等しいが、30度の倍数であるときには約13.4%の差が生じる（例えば H = H2 = 30° のとき C = 1 に対して C2 = ≒ 0.866）。 サムネイル|360x360ピクセル|図11aからd：あるHue（50度と230度）の面において、明るさを表す4種類の次元とChromaの関係を示した図。
明るさを表す成分の導出 Hueの定義は比較的一貫しているのに対し、明るさを表す成分の定義はモデルによって分かれる。ここでは、一般的な4種類の定義を示す（図11。これらのうち3つは図7にも示されている）。
HSI色空間では、Intensity（強度）は R, G, B の平均値として定義される。これは、傾けたRGB立方体の軸に、ある色の点を投影したときの垂直方向の高さに等しい。この定義では、ある色のRGB立方体における幾何学的な情報を、Hue、Chromaとあわせて保持できるという利点がある。
HSV色空間（図7の「Hexcone」モデル）では、Value（明度）は R, G, B の最大値として定義される。この定義では、赤、黄色、緑、シアン、青、マゼンタの全てが白と共通の平面上に位置する。
HSL色空間（図7の「Double Hexcone」モデル）では、Lightness（輝度）は R, G, B の中間値として定義される。この定義では、赤、黄色、緑、シアン、青、マゼンタを同一平面上に配置するものの、その平面は白と黒の中間を通る。
より人間の知覚に近づけるための方法として、明るさの指標にルーマ（Y'）を用いる方法がある。ルーマは人間の知覚に基づいてガンマ補正された R, G, B の加重平均であり、カラーテレビ放送の白黒成分の次元として用いられている。sRGBでは Rec. 709 に基づくY'709、NTSCでは Rec. 601 に基づくY601が用いられるなど、定義と用途はさまざまであるLumaという用語に関するより具体的な議論は、Charles Poynton (2008) を参照されたい。Adobe Photoshop の「Luminosity」ブレンドモードでは、RGB色空間に関係なくNTSCの係数を使用する。。 (SDTV) (Adobe RGB) (HDTV) (UHDTV, HDR)
サムネイル|360x360ピクセル|図12aからd：HSLとHSVでは、HueとLightness・Valueの全ての組み合わせに対して有意義なSaturationが定義されるよう、Chromaを拡張する。
Saturation（彩度）の導出 Hue・Chroma・LightnessやHue・Chroma・Valueによって色を表現するモデルでは、0度以上360度未満の H 、0以上1未満の C 、0以上1未満の V で表現できる色のうちの半分がRGB色域外（図14a、図14cの灰色に塗られた部分）であるため、Lightness（またはValue）とChromaの組み合わせがすべて有意義なわけではない。
これをより実用的にするため、HSLとHSVでは、HueとLightness・Valueがどのような組み合わせでも常に0以上1未満に収まるような新たな属性「Saturation（彩度）」を定義する。Saturationは、ある色のChromaを、その色のLightnessまたはValueで割ったものであり、HSLにおけるSaturationを SL 、HSVにおけるSaturationを SV とおいて次のように定義される。
サムネイル|300x300ピクセル|図13a, b：HSIにおける「Saturation」（図13b）は、Saturationの定義「Lightnessに対するChroma」におおよそ対応する。また、図13aのような H2, I, C2 によるモデルも用いられる。これらの断面の真の「Hue」は図11, 12と同じであるが、成分 H, H2 は計算方法の違いによって異なっている。 一方、コンピュータビジョンの分野で一般的に用いられるHSIモデルはHueを H2 「Hue（色相）とChroma（クロマ）の導出」を参照。、明るさの成分を I 「明るさを表す成分の導出」を参照。とするもので、HSLやHSVのように円柱を「埋める」ようなChromaの操作を行わない。代わりにHSIにおけるSaturationは、精神測定的な定義である「Lightnessに対するChroma「色を構成する属性」を参照。」に沿って定義される（図13b）。これは、HSIが、色選択インターフェースの提供よりも、画像内の形状の分離を容易にすることを主な目的としているためである。画像解析における利用の項目も参照されたい。
これら3種類のモデルで、定義や実態が異なるにもかかわらず「Saturation」という同名の成分を用いていることは、しばしば混乱の元となる。HSVとHSIでは、この成分は「ある色自身のLightnessに対するChroma」という精神測定的な定義に近いが、HSLではそうではない。さらに、「Saturation（彩度）」という単語は、この記事でChromaと呼ぶ値（ C や C2 ）に対してもよく用いられる。
実例 以下に示される値は、 H と H2 が0度以上360度未満であることを除き、すべて0以上1以下であるこの表の上部9色は作為的に、残りの10色は無作為に選ばれた。。 ColorRGBHH2CC2VLIY′601SHSVSHSLSHSI#FFFFFF1.0001.0001.000n/an/a0.0000.0001.0001.0001.0001.0000.0000.0000.000#8080800.5020.5020.502n/an/a0.0000.0000.5020.5020.5020.5020.0000.0000.000#0000000.0000.0000.000n/an/a0.0000.0000.0000.0000.0000.0000.0000.0000.000#FF00001.0000.0000.000°°1.0001.0001.0000.5000.3330.2991.0001.0001.000#BFBF000.7490.7490.000°°0.7490.7490.7490.3750.4990.6641.0001.0001.000#0080000.0000.5020.000°°0.5020.5020.5020.2510.1670.2951.0001.0001.000#80FFFF0.5021.0001.000°°0.4980.4981.0000.7510.8340.8510.4981.0000.398#8080FF0.5020.5021.000°°0.4980.4981.0000.7510.6680.5590.4981.0000.249#BF40BF0.7490.2510.749°°0.4980.4980.7490.5000.5830.4570.6650.4980.570#A0A4240.6270.6430.141°°0.5020.4940.6430.3920.4710.5810.7800.6400.700#411BEA0.2550.1060.918°°0.8120.7480.9180.5120.4260.2430.8850.8310.752#1EAC410.1180.6750.255°°0.5570.5020.6750.3960.3490.4600.8260.7030.663#F0C80E0.9410.7840.055°°0.8860.8190.9410.4980.5930.7480.9420.8900.907#B430E50.7060.1880.898°°0.7100.6360.8980.5430.5970.4240.7900.7770.685#ED76510.9290.4630.318°°0.6120.5540.9290.6240.5700.5860.6580.8130.443#FEF8880.9960.9730.533°°0.4630.4510.9960.7650.8340.9300.4650.9830.361#19CB970.0980.7960.592°°0.6980.6220.7960.4470.4950.5640.8770.7810.802#3626980.2120.1490.596°°0.4470.4190.5960.3730.3190.2190.7500.6000.533#7E7EB80.4940.4940.722°°0.2270.2270.7220.6080.5700.5200.3150.2900.133
ソフトウェアにおける利用
サムネイル|270x270px|図14：HSV（HSB）を採用している色選択ツールの一例。この例では、Hue, Value（Brightness）は1つの面（円柱側面）で、Saturationはスライダーでそれぞれ選択できるようになっている。 HSLやHSVのようなモデルは、グラフィックソフトウェアなどにおける色選択ツールでしばしば用いられる。最も簡単なものでは各属性に対して1つ、計3つのスライダーが用意されているが、ほとんどの場合、モデルの2次元断面を表示し、どの断面を表示するかをスライダーで選択するようになっている（図14）。後者のGUIは、円柱、六角柱、円錐、双円錐などのモデルの形状に応じて様々に表示される。今日のコンピューター上の色選択ツールは、そのほとんどが、少なくともオプションとしてHSLやHSVを採用している。また、HSLやHSVの属性に基づいて色の組み合わせを提案するようなものも存在する。
色選択を要するほとんどのウェブアプリケーションは、HSLまたはHSVをベースとしたツールを使用しており、主要なウェブフロントエンド フレームワークの多くに、オープンソースの色選択ツールが含まれている。CSS3の仕様では、開発者が色の指定にHSLの値をそのまま利用できる。
HSLとHSVは、地図や医療画像などにおいて、データ可視化のためのグラデーションを定義するために利用されることがある。例えば、GISプログラムであるArcGISは、カスタマイズ可能なHSVベースのグラデーションを地理データに適用しているArcGISでは、このグラデーションを「Color ramps」と呼んでいる。2008年のバージョンではCIELABも利用できる。。
画像編集ソフトには、HSLやHSV、あるいはIntensityやLumaに基づくモデルを利用して色を調整する機能をもつものがある。特に、色相と彩度のスライダーをもつツールは、少なくとも1980年代後半から一般的になっているが、より複雑なツールも様々に実装されている。
動画編集ソフトでも、これらのモデルは用いられる。例えば、Avidや Final Cut Pro には、HSLまたは類似のモデルに基づく色編集ツールがあり、動画の色の補正に使用できる。
画像解析における利用
HSL、HSV、HSI、またはそれらに関連する色モデルは、コンピュータビジョンや画像解析において、特徴検出や画像セグメンテーションのためによく利用される。これは、物体検出、顔認識、文字認識、画像検索や医用画像の解析などで活用される。
カラー画像に使用されるコンピュータビジョンのアルゴリズムには、k平均法やファジィクラスタリング、Canny法など、グレースケール画像用に設計されたアルゴリズムをそのまま拡張したものがあり、最も単純な例では、色の成分ごとにこれらのアルゴリズムが適用される。このような場合には、RGB成分よりも、色相、明度、彩度のような成分を利用する方がより適切であることが多い。
1970年代後半から、特徴検出に対する有効性と計算量の少なさから、HSVやHSIのようなモデルへの色空間の変換が利用されてきた。物体の検出を目的とするならば色相、明度、彩度を大まかに分けるだけで十分であり、人間の色彩に対する知覚を厳密に再現する必要は特にないと考えられたためである。