この項目では色を扱っています。閲覧環境によっては、色が適切に表示されていない場合があります。

HSL色空間（HLS色空間ともよばれる）とHSV色空間（HSB色空間とも呼ばれる）は、Hue（色相）、Saturation（彩度）と、HSLではLightness, Luminance^{[注釈 1]}（輝度）、HSVではValue（明度）の3つの成分からなる色空間であり^{[注釈 2][注釈 3]}、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% であるが、青よりも黄色のほうがはるかに明るく感じられる。

基本となる考え方

図2a：HSL色空間を表す円柱

図2b：HSV色空間を表す円柱

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は、黒と白を同時に混ぜる場合に小さくなる。

図3aと図3b：HSLのLightnessに対して（図3a）、またはHSVのValueに対して（図3b）、SaturationではなくChroma（RGBの値の範囲）をプロットした場合、それぞれの空間は双円錐、円錐となる。このような図では、しばしば「Chroma」が「Saturation」と混同され、HSLやHSVの空間を直接表現したものであると主張される。

このような彩度の定義では、暗い色（両モデルとも）や明るい色（HSLの場合）も「Saturation 100%」すなわち「最も鮮やかな色」とされ、「Saturation（彩度）」を「鮮やかさ」としてとらえる場合、直感に反する^{[注釈 4]}。そこで図3のように、円柱の代わりに、半径方向にChroma（ある色をRGB色空間で表した際のその値の範囲に等しい。詳細は後述される）をとる円錐や双円錐を用いて色空間を表現することがある。このとき、半径方向の値が「Saturation」「彩度」と表現され、「Chroma」との区別が曖昧にされる場合がある。

後述されるように、Chromaの算出は、RGBからのHSL・HSVへの変換において有用である。

歴史

図4：古くから用いられてきた色の調合方法を簡易的に示した図。純色に対して白を加えたものを明清色、黒を加えたものを暗清色、白と黒の両方（すなわち灰色）を加えたものを中間色という。

図5：ドイツの化学者ヴィルヘルム・オストワルトによる色モデル（オストワルト表色系）。白または黒との混色というHSLに近いアプローチを示しており、24の色相を三角形で表し、環状に配置している。

HSL色空間は、1938年にフランスの技術者ジョルジュ・ヴァレンシによって、白黒の（輝度信号のみを放送する）テレビジョン放送に色の情報を付加する方法として開発された^{[注釈 5]}。このような方法はNTSC、PAL、SECAMなど主要なアナログテレビ放送やデジタルテレビ放送で使用されており、コンポジット映像信号の基礎となっている。

テレビ、パソコン、プロジェクターの多くは、赤、緑、青の3色の光を、強さを変えながら組み合わせることで色を表現する（加法混色）。しかし、十分に経験のない者や、絵具による混色（減法混色）に基づく色の表現に慣れている者は、この方法では容易には色を表現できない^{[注釈 6]}。より直感的な混色に対応するため、1970年代半ば、パロアルト研究所とニューヨーク工科大学の研究者らは、コンピューターのディスプレイ技術にHSV色空間を導入し、これはその後1978年8月の Computer Graphics 誌で、アルヴィ・レイ・スミスによって正式に記述された。

翌1979年には、テクトロニクスが色の指定にHSLを用いたグラフィックス端末をSIGGRAPHで発表した。HSLはRGBよりも直感的であるという点だけでなく、RGBとの変換が高速で可能であり、1970年代のコンピューターでもリアルタイムで相互に変換可能であった点でも便利であった。

以上の背景から、HSLや類似の色空間は、後述のように画像編集やグラフィックソフトウェアで広く使用されるようになった。

RGBからの導出

色を構成する属性

HSL色空間やHSV色空間の表現に用いられる値は、国際照明委員会などによって定義される同名の学術的な概念と直接関係するわけではない。しかし、初めにそのような概念について確認しておくことは有益である。

Hue（色相）

ある領域が、知覚される色（例えば赤、黄、緑、青）、あるいはそれらの2色の組み合わせに近いように見えるということに関する視覚的属性。

Radiance, L_e,Ω（放射輝度）

単位立体角あたり、単位投影面積あたりの放射束。SI単位は ワット毎ステラジアン毎平方メートル （W sr⁻¹ m⁻²）。

Luminance, Y または L_v,Ω（輝度）

放射輝度を波長ごとに重みづけして表される心理物理量。SI単位は カンデラ毎平方メートル （cd m⁻²）。輝度という用語は、 Y_n を基準の白とする相対輝度 Y/Y_n を指して用いられることがある。

Luma, Y'（ルーマ）

ガンマ補正された R', G', B' 値の加重和で、Y'CbCrでのJPEGファイルの圧縮や映像信号処理に利用される。

Brightness, Value（明るさ^{[訳語疑問点]}）

ある領域が、多かれ少なかれ光を発しているように見えるということに関する視覚的属性。

Lightness（明度・白さ^{[訳語疑問点]}）

同じ照明を受けて白色に見える領域のBrightness（明るさ）に対する、ある領域の相対的なBrightness（明るさ）。

Colorfulness（鮮やかさ^{[訳語疑問点]}）

ある領域に関して知覚される色が多かれ少なかれ有彩色に見えるということに関する視覚的属性。

Chroma（クロマ^{[訳語疑問点]}）

同じ照明を受けて白色に見える領域のBrightness（明るさ）に対する、ある領域の相対的なColorfulness（鮮やかさ）。

Saturation（彩度・飽和度^{[訳語疑問点]}）

ある領域の、その領域自体のBrightness（明るさ）に対して感じられる相対的なColorfulness（鮮やかさ）。

Lightness（明度）とChroma（クロマ）がある白色の領域を基準として相対的に定められる指標であるのに対し、Brightness（明るさ）とColorfulness（鮮やかさ）は、通常、目に到達する光のスペクトル分布などの物理的特性を表す絶対的な指標である。周囲の照明の変化によってBrightness（明るさ）とColorfulness（鮮やかさ）は変化するのに対し、Lightness（明度・白さ）とChroma（クロマ）はあまり変動しないため、物体表面の色の表現には後者がしばしば用いられる^{[注釈 7]}。Saturation（彩度・飽和度）は、Brightness（明るさ）に対するColorfulness（鮮やかさ）の比、あるいはLightness（明度）に対するChroma（クロマ）の比のどちらとしても定義されうる。

これ以降、特に明記されない限り、Hue、Saturationなどの単語はこれらの学術的な用語とは異なるものとする。

基本的な考え方

HSL、HSVやそれらに関連する色空間は、幾何学的に導出することができる。そのような色空間は「一般化されたLHSモデル」のうちの特定の色空間であるといえる。

HSLとHSVの色空間を構築するには、まずRGB立方体（ R, G, B ∈ [0, 1] ）を、黒が原点、白がその真上になるよう傾け、黒と白を結ぶ軸の周りの角度について、赤を0度としてHueを定義する。その後、軸上でValueあるいはLightnessを定義し、さらに軸に直交する方向（水平方向）に軸を0、純色を1としてSaturationを定義する。

Hue（色相）とChroma（クロマ）の導出

HSL・HSVやそれに似た色モデルでは、Hueと、この記事でChromaと呼ぶ^{[注釈 8]}値を同様に算出するため、それらの値は各モデルで同一となる。

傾けたRGB立方体を黒と白を結ぶ軸に垂直な平面に投影すると、赤、黄、緑、シアン、青、マゼンタを頂点とする正六角形となる（図8）。ここで、平面の原点は黒とする。Hueは、赤の位置ベクトルと投影された点（ある色をRGB空間で示す点を平面に投影したもの）の位置ベクトルのなす角の大きさに近い値で、Chromaは、原点と投影された点の間の距離に近い値で、それぞれ表される^{[注釈 9][注釈 10]}。

これらの色空間におけるHueとChromaは、いずれも平面に投影された六角形を基準として定義される。Chromaは、ある色を示す位置ベクトルの大きさの、そのベクトルを延長して最も外側の六角形と交わる点と原点との間の距離に対する割合（図8下の六角形における OP/OP' ）である。この割合は、ある色の R, G, B の値のうちの最大値と最小値の差、すなわち R, G, B の値の範囲を指している^{[注釈 11]}。ここで最大値、最小値、Chromaをそれぞれ M, m, C とそれぞれおくと、^{[注釈 12]}

${\displaystyle M=\max(R,G,B)}$

${\displaystyle m=\min(R,G,B)}$

${\displaystyle C=\operatorname {range} (R,G,B)=M-m}$

Hueは、投影された点を通る六角形の辺の全周の長さに対する、投影された点までの辺の長さの割合であり、当初は0以上1以下の値で定義されたが、現在では一般的に0度以上360度未満の角度で定義される。原点に投影される点（白、黒とその間を補完する灰色）に対しては、Hueは定義されない。数学的には、このことは次のように区分的に定義される。

${\displaystyle H^{\prime }={\begin{cases}\mathrm {undefined} ,&{\text{if))~~C=0\\{\frac {G-B}{C)){\bmod {6)),&{\text{if))~~M=R\\{\frac {B-R}{C))+2,&{\text{if))~~M=G\\{\frac {R-G}{C))+4,&{\text{if))~~M=B\end{cases))}$

${\displaystyle H=60^{\circ }\!\times H^{\prime ))$

便宜上、無彩色のHueを0度とすることもある。

これらの定義から、六角形の各辺を60度の円弧にマッピングすることで、六角形を円に変換することができる。このような変換を行うと、Hueは原点周りの角度、Chromaは原点からの距離、すなわちある色の位置ベクトルが赤の位置ベクトルに対してなす角と、そのベクトルの大きさでそれぞれ正確に表せる。

画像解析ソフトでは、上述のような変形の代わりに、HueとChroma（それぞれ H₂, C₂ とおく）を直交座標の極座標変換によって定義することがある（図10）。これは、 αβ 座標を用いて次のように行うことができる。

${\displaystyle \alpha =R-G\!\cdot \!\cos(60^{\circ })-B\!\cdot \!\cos(60^{\circ })={\frac {1}{2))(2R\!-\!G\!-\!B)}$

${\displaystyle \beta =G\!\cdot \!\sin(60^{\circ })-B\!\cdot \!\sin(60^{\circ })={\frac {\sqrt {3)){2))(G-B)}$

${\displaystyle H_{2}=\operatorname {atan2} (\beta ,\alpha )}$

${\displaystyle C_{2}=\operatorname {gmean} (\alpha ,\beta )={\sqrt {\alpha ^{2}\!+\beta ^{2))))$

ここで、atan2は2つの引数をとるarctanであり、直交座標の2成分から角度を計算する。

この方法と円への変形とを比較すると、Hue（ H と H₂ ）はほぼ一致しており、どの色においてもその差は最大で約1.12度である（ H ≒ 13.38°, H₂ ≒ 12.26° などの12か所で差が最大となり、30度の倍数では H = H₂ ）。しかし、Chroma（ C と C₂ ）については、Hueが60度の倍数となる位置では両者は等しいが、30度の倍数であるときには約13.4%の差が生じる（例えば H = H₂ = 30° のとき C = 1 に対して C₂ = √¾ ≒ 0.866）。

明るさを表す成分の導出

Hueの定義は比較的一貫しているのに対し、明るさを表す成分の定義はモデルによって分かれる。ここでは、一般的な4種類の定義を示す（図11。これらのうち3つは図7にも示されている）。

• HSI色空間では、Intensity（強度）は R, G, B の平均値として定義される。これは、傾けたRGB立方体の軸に、ある色の点を投影したときの垂直方向の高さに等しい。この定義では、ある色のRGB立方体における幾何学的な情報を、Hue、Chromaとあわせて保持できるという利点がある。

  ${\displaystyle I=\operatorname {avg} (R,G,B)={\frac {1}{3))(R\!+\!G\!+\!B)}$

• HSV色空間（図7の「Hexcone」モデル）では、Value（明度）は R, G, B の最大値として定義される。この定義では、赤、黄色、緑、シアン、青、マゼンタの全てが白と共通の平面上に位置する。

  ${\displaystyle V=\max(R,G,B)=M}$

• HSL色空間（図7の「Double Hexcone」モデル）では、Lightness（輝度）は R, G, B の中間値として定義される。この定義では、赤、黄色、緑、シアン、青、マゼンタを同一平面上に配置するものの、その平面は白と黒の中間を通る。

  ${\displaystyle L=\operatorname {mid} (R,G,B)={\frac {1}{2))(M+m)}$

• より人間の知覚に近づけるための方法として、明るさの指標にルーマ（Y'）を用いる方法がある。ルーマは人間の知覚に基づいてガンマ補正された R, G, B の加重平均であり、カラーテレビ放送の白黒成分の次元として用いられている。sRGBでは Rec. 709 に基づくY'₇₀₉、NTSCでは Rec. 601 に基づくY'₆₀₁が用いられるなど、定義と用途はさまざまである^{[注釈 13]}。

  ${\displaystyle Y_{\text{601))^{\prime }=0.299~R+0.587~G+0.114~B}$ (SDTV)

  ${\displaystyle Y_{\text{240))^{\prime }=0.212~R+0.701~G+0.087~B}$ (Adobe RGB)

  ${\displaystyle Y_{\text{709))^{\prime }=0.2126~R+0.7152~G+0.0722~B}$ (HDTV)

  ${\displaystyle Y_{\text{2020))^{\prime }=0.2627~R+0.6780~G+0.0593~B}$ (UHDTV, HDR)

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を S_L 、HSVにおけるSaturationを S_V とおいて次のように定義される。

${\displaystyle S_{L}={\begin{cases}0,&{\text{if))~~L\!=\!1~~{\text{or))~~L\!=\!0\\{\frac {C}{1-\vert 2L-1\vert )),&{\text{otherwise))\end{cases))}$

${\displaystyle S_{V}={\begin{cases}0,&{\text{if))~~V=0\\{\frac {C}{V)),&{\text{otherwise))\end{cases))}$

一方、コンピュータビジョンの分野で一般的に用いられるHSIモデルはHueを H₂ ^{[注釈 14]}、明るさの成分を I ^{[注釈 15]}とするもので、HSLやHSVのように円柱を「埋める」ようなChromaの操作を行わない。代わりにHSIにおけるSaturationは、精神測定的な定義である「Lightnessに対するChroma^{[注釈 16]}」に沿って定義される（図13b）。これは、HSIが、色選択インターフェースの提供よりも、画像内の形状の分離を容易にすることを主な目的としているためである。画像解析における利用の項目も参照されたい。

${\displaystyle S_{I}={\begin{cases}0,&{\text{if))~~I=0\\1-{\frac {m}{I)),&{\text{otherwise))\end{cases))}$

これら3種類のモデルで、定義や実態が異なるにもかかわらず「Saturation」という同名の成分を用いていることは、しばしば混乱の元となる。HSVとHSIでは、この成分は「ある色自身のLightnessに対するChroma」という精神測定的な定義に近いが、HSLではそうではない。さらに、「Saturation（彩度）」という単語は、この記事でChromaと呼ぶ値（ C や C₂ ）に対してもよく用いられる。

実例

以下に示される値は、 H と H₂ が0度以上360度未満であることを除き、すべて0以上1以下である^{[注釈 17]}。

ソフトウェアにおける利用

HSLやHSVのようなモデルは、グラフィックソフトウェアなどにおける色選択ツールでしばしば用いられる。最も簡単なものでは各属性に対して1つ、計3つのスライダーが用意されているが、ほとんどの場合、モデルの2次元断面を表示し、どの断面を表示するかをスライダーで選択するようになっている（図14）。後者のGUIは、円柱、六角柱、円錐、双円錐などのモデルの形状に応じて様々に表示される。今日のコンピューター上の色選択ツールは、そのほとんどが、少なくともオプションとしてHSLやHSVを採用している。また、HSLやHSVの属性に基づいて色の組み合わせを提案するようなものも存在する。

色選択を要するほとんどのウェブアプリケーションは、HSLまたはHSVをベースとしたツールを使用しており、主要なウェブフロントエンド フレームワークの多くに、オープンソースの色選択ツールが含まれている。CSS3の仕様では、開発者が色の指定にHSLの値をそのまま利用できる^{[出典 2]}。

HSLとHSVは、地図や医療画像などにおいて、データ可視化のためのグラデーションを定義するために利用されることがある。例えば、GISプログラムであるArcGISは、カスタマイズ可能なHSVベースのグラデーションを地理データに適用している^{[注釈 18]}。

画像編集ソフトには、HSLやHSV、あるいはIntensityやLumaに基づくモデルを利用して色を調整する機能をもつものがある。特に、色相と彩度のスライダーをもつツールは、少なくとも1980年代後半から一般的になっているが、より複雑なツールも様々に実装されている。

動画編集ソフトでも、これらのモデルは用いられる。例えば、Avidや Final Cut Pro には、HSLまたは類似のモデルに基づく色編集ツールがあり、動画の色の補正に使用できる。

画像解析における利用

HSL、HSV、HSI、またはそれらに関連する色モデルは、コンピュータビジョンや画像解析において、特徴検出や画像セグメンテーションのためによく利用される。これは、物体検出、顔認識、文字認識、画像検索や医用画像の解析などで活用される。

カラー画像に使用されるコンピュータビジョンのアルゴリズムには、k平均法やファジィクラスタリング、Canny法など、グレースケール画像用に設計されたアルゴリズムをそのまま拡張したものがあり、最も単純な例では、色の成分ごとにこれらのアルゴリズムが適用される。このような場合には、RGB成分よりも、色相、明度、彩度のような成分を利用する方がより適切であることが多い。

1970年代後半から、特徴検出に対する有効性と計算量の少なさから、HSVやHSIのようなモデルへの色空間の変換が利用されてきた。物体の検出を目的とするならば色相、明度、彩度を大まかに分けるだけで十分であり、人間の色彩に対する知覚を厳密に再現する必要は特にないと考えられたためである。

HSIは John Kender の1976年の修士論文で提案され、その後1980年に、大田友一らによって先述の極座標変換に近いモデルが使用された^{[注釈 19]}。これらのモデルはより複雑なモデルよりも計算が簡単であり、性能も十分であることから、近年でも広く利用され続けている。

欠点

図15a：sRGB色域をCIELAB色空間に配置した図。 R, G, B で色相は等間隔でなく、原点からの距離も異なる。また、それぞれの L* の値も異なる（知覚的な明るさが異なる）。

図15b：Adobe RGB 色域をCIELAB色空間に配置した図。sRGB同様、 R, G, B の知覚的な関連は強くないことがわかる。

HSL、HSVやそれらに関連する色空間は、例えば単色を選択する程度であれば十分な機能を果たすものの、色の詳細な情報の多くを無視する。1970年代の画像処理装置や、1990年代の一般向けコンピューターなどでは、色の知覚的な関連性と高速な計算を両立しなければならなかったことが、この問題の背景にある^{[注釈 20]}。

HSLとHSVはRGBの単純な変換であり、RGB立方体の R, G, B の頂点が無彩色の軸から等距離・等間隔で配置されるという、人間の知覚とは無関係な対称性を保持している。RGBの色域をLab色空間のような知覚的に均一な空間にプロットする（図15）と明らかであるが、赤、緑、青の知覚的な明るさや彩度はそれぞれ異なり、色相も等間隔でない。

また、変換されるRGB空間が用いるガンマ補正などの特性によって、HSLやHSVの値は変化する。

HSLとHSVによる色表現の人間の知覚との乖離は、画像からHue、Saturation、Lightness・Valueをそれぞれ抽出し、同名の学術的な定義と比較することで顕著となる。

図16aの画像は、sRGB色空間を用いたカラー画像である。図16bは CIELAB L*（sRGB色空間の元となったCIEXYZ色空間の色成分のうち、知覚的な明るさを示す無彩色輝度成分 Y のみに依存する量）によるグレースケール画像であり、これは元のカラー画像に近い明るさであると感じられる。図16cのLuma（ Y' ）による画像でも、彩度の高い部分ではやや異なって見えるが、似たように感じられる。一方、図16e, fはHSVのValue V 、HSLのLightness L によるグレースケール画像であるが、オリジナルの画像の明るさとは大きく異なるように見える。

図16a：sRGB色域によるカラー画像。

図16b：CIELAB L* によるグレースケール画像。カラー画像で感じられる明るさに近い。

図16c：Rec. 601 のLumaによるグレースケール画像。

図16d：HSIの I （R, G, B の平均値）によるグレースケール画像。

図16e：HSVの V によるグレースケール画像。

図16f：HSLの L によるグレースケール画像。

これらの色空間はいずれも人間の知覚と完全に一致しているわけではないが、特にHSVのValue V とHSLのLightness L では特にずれが大きい。HSVでは純色の青   と白   は同じValue（明度）であるが、人間の知覚では、純色の青の輝度は白の10%程度である（正確な割合は使用するRGB色空間の種類に依存する）。また、HSLでは、赤100%、緑100%、青90%の非常に明るい黄色   は、知覚に基づく定義では彩度が非常に低いにもかかわらず、Saturation（彩度）は純色の緑   と等しいものとされる。地図製作における視認性や色彩に関する専門家である Cynthia Brewer は、このような状況について次のように指摘した。

コンピュータサイエンスは、HSVやHLSのような不十分なものを知覚空間に提供しました。あなたの使うソフトウェアのインターフェイスにも現れるかもしれません。HSVやHLSはRGBの単純な数学的な変換ですが、Hue、LightnessあるいはValue、Saturationという用語を使っているために、あたかも知覚的なシステムのように見えます。しかし、よく見てください。騙されてはいけません。

知覚的な色の次元は、これらや他のいくつかの仕組みでは、適切には尺度化されていません。例えば、SaturationとLightnessは混同されており、「Saturation（彩度）」という尺度に幅広い（知覚的な）明るさも含まれていることがあります（例えば、（知覚的な）彩度と（知覚的な）明るさがともに変わるはずの白から緑への移動が可能です）^{[注釈 21]}。HueとLightnessも混同されています。例えば、純色の黄色と純色の青は同じ「Lightness（輝度・明るさ）」であるとされますが、知覚的な明るさは大きく異なります。

このような欠陥が、体系的な方法で配色をコントロールすることを困難にしています。望ましい効果を得るために多くの微調整が必要であれば、RGBやCMYの生の仕様と格闘することに対する利益は、ほぼありません。^{[出典 3]}

このようなことによってHSLやHSVが色選択の場面で問題を抱えているとすると、画像補正にはより不向きであるといえる。HSLとHSVは、 Brewer が述べるように知覚的な色の属性を混同しているため、1つの値を変更すると、3つの知覚的な属性すべてに不均一な変化が生じ、画像全体の色関係が歪んでしまう。例えば、濃紺色のHue（色相）を緑色に近づくように変更する（例えば   から   ）と、知覚的な彩度は低下し、知覚的な明るさは増加する（すなわち、より灰色みが強まり、明るくなったように見える）が、より明るい青みの緑から同じ角度だけHueを変更した場合（例えば   から   ）では全く逆に、知覚的な彩度が増加し、知覚的な明るさが減少する（すなわち、より鮮やかになり、暗くなったように見える）。

下の図17の例では、図17aのオリジナルの画像に対し、図17bでHSLのSaturationとLightnessあるいはHSVのSaturationとValueを一定に保ってHueを−30度回転し、図17cではCIELABの輝度（ L* 、すなわち知覚的な明るさの近似値）を一定に保って同じHueの回転（−30度）を施している。図17bでは、亀の甲羅はより暗く、背景はより明るくなっているように見えるなど、知覚的な明るさに関して大きな違いが表れている。

図17a：カラー画像。

図17b：HSL・HSVのHueを−30度回転させた画像。

図17c：知覚的な明るさを保ったままHueを−30度回転させた画像。

Hueは360度で不連続な円形の量であるため、単純な計算や定量的な比較が難しい。また、Hueは60度ごとに区分的に定義され、R, G, B に対するLightness・Value、Saturationの関係は、その区分に依存して決定される。この定義では、HSLやHSVの水平断面で見られる不連続性が生じる。

デジタル映像分野の専門家である Charles Poynton は、HSLやHSVに関する上述のような問題点について、次のように結論づけている。

HSBとHLSは、ユーザーが色を数値的に指定しなければならなかった時代に、Hue（色相）、Saturation（彩度）、Brightness（明度）、あるいはHue、Lightness（輝度）、Saturationを数値で指定するために開発されました。HSBとHLSの通常の定式化には、色覚特性に関して欠陥があります。ユーザーが色を視覚的に選んだり、別の手段に関連付けられた色を選んだり（例えばPANTONE）、あるいはL*u*v*やL*a*b*のような知覚に基づく仕組みを使ったりできるようになった現在では、HSBやHLSは放棄されるべきでしょう。^{[出典 4]}

円筒座標系を用いる他の色モデル

HSLやHSVは、無彩色の軸とその周りの角度に対応する色相をもつ円錐または球形の色モデルとしては、最初のものではない。同様のモデルは18世紀から現在に至るまで開発が続いている（図5のオストワルト表色系など）。

異なる色モデル間の数学的な変換

方針

HSLまたはHSVからRGBへ変換するためには、基本的には上述の手順を反転する。その際も、 R, G, B ∈ [0, 1] である。

まず、与えられた色のLightnessまたはValueにおけるChromaの最大値をSaturationの値に乗じることにより、Chromaを計算する。次に、RGB立方体の底面3面のうち、与えられた色と同じHueとChromaをもつ、すなわち色度平面上の同じ点に投影される点を探す。最後に、与えられた色のLightnessまたはValueに一致するよう、 R, G, B に等量を加算する^{[注釈 12]}。

RGBへの変換

HSLからRGBへ

Hueを H ∈ [0°, 360°) 、Saturationを S_L ∈ [0, 1] 、Lightnessを L ∈ [0, 1] とする。

まず、次のようにしてChroma C を求める。

${\displaystyle C={\big (}1-\vert 2L\!-\!1\vert {\big )}\times S_{L))$

ただし、円錐モデルではSaturationの値として実際にはChromaを用いているため、変換は必要ない。

${\displaystyle C=S_{L))$

次に、RGB立方体の底面3面において、与えられた色と同じHue、Chromaをもつ点 (R₁, G₁, B₁) を求める。この操作のために、 H', X を次のように定義する。

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }\!))}$

${\displaystyle X=C\times {\big (}1-{\big \vert }(H^{\prime }\!{\bmod {2)))-1{\big \vert }{\big )))$

ここで、 (H' mod 2) は H' を2で割った余りである。 H' は整数でなくてもよい。

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if))~H~{\text{is undefined))\\(C,X,0)&{\text{if))~~0\leqq H^{\prime }\!<1\\(X,C,0)&{\text{if))~~1\leqq H^{\prime }\!<2\\(0,C,X)&{\text{if))~~2\leqq H^{\prime }\!<3\\(0,X,C)&{\text{if))~~3\leqq H^{\prime }\!<4\\(X,0,C)&{\text{if))~~4\leqq H^{\prime }\!<5\\(C,0,X)&{\text{if))~~5\leqq H^{\prime }\!<6\end{cases))}$

最後に、Lightnessを合わせるために R₁, G₁, B₁ それぞれに m を加えると、 R, G, B が求められる。

${\displaystyle m=L-{\frac {C}{2))}$

${\displaystyle (R,G,B)=(R_{1}\!+m,~G_{1}\!+m,~B_{1}\!+m)}$

HSLからRGBへ（簡略化）

上記の区分的に定義された関数は、最小値、最大値、剰余の演算を活用して簡略化できる。

Hueを H ∈ [0°, 360°) 、Saturationを S_L ∈ [0, 1] 、Lightnessを L ∈ [0, 1] とし、まず次の関数 f(n) を定義する。

${\displaystyle f(n)=L-a\!\cdot \!\max \!{\big (}{-1,~\min(k\!-\!3,~9\!-\!k,~1)}{\big )))$

ただし、 k, n はともに0以上の実数であり、 k, a は次のように定義される。

${\displaystyle k={\Big (}n+{\frac {H}{30^{\circ }\!)){\Big )}{\bmod {1))2}$

${\displaystyle a=S_{L}\!\times \min(L,~1\!-\!L)}$

ここで、 k ∈ [0, 12) となる。

これらのもとで、R, G, B の値（それぞれ0以上1以下）が次のように得られる。

${\displaystyle (R,G,B)={\big (}f(0),~f(8),~f(4){\big )))$

ここで、 f(n) のうち ${\textstyle \max \!{\big (}{-1},~\min(k\!-\!3,~9\!-\!k,~1){\big )))$ の部分は、 H, S, V と R, G, B の関係性を表すグラフ（図18）の基本形状を表している。これは k の関数であり、k は n, H の関数であるから、 ${\textstyle t(n,H)=T(k)=\max \!{\big (}{-1},~\min(k\!-\!3,~9\!-\!k,~1){\big )))$ と表せる。これは、次のように構成される。

${\displaystyle t_{1}=\min(k\!-\!3,~9\!-\!k)}$ は、 k = 6 で直線を折り返す上に凸のグラフを描く。ここで ${\displaystyle t_{2}=\min(t_{1},~1)}$ 、さらに ${\displaystyle t=\max(t_{2},-1)=\max \!{\big (}{\min(t_{1},~1),-1}{\big )))$ とし、 t の範囲を−1以上1以下に制限する。このとき、このグラフは図18の R のグラフを上下反転したような形をしている。

関数 f(n) では、 n によって x 方向の平行移動、 −a 倍によって y 方向の拡大縮小、 L によって y 方向の平行移動を行い、 R, G, B それぞれのグラフを得ている。

HSVからRGBへ

Hueを H ∈ [0°, 360°) 、Saturationを S_V ∈ [0, 1] 、Valueを V ∈ [0, 1] とする。

まず、次のようにしてChroma C を求める。

${\displaystyle C=V\times S_{V))$

ただし、双円錐モデルではSaturationの値として実際にはChromaを用いているため、変換は必要ない。

${\displaystyle C=S_{V))$

次に、RGB立方体の底面3面において、与えられた色と同じHue、Chromaをもつ点 (R₁, G₁, B₁) を求める。この操作のために、 H', X を次のように定義する。この操作は、HSLの場合と全く同じである。

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }\!))}$

${\displaystyle X=C\times {\big (}1-{\big \vert }(H^{\prime }\!{\bmod {2)))-1{\big \vert }{\big )))$

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if))~H~{\text{is undefined))\\(C,X,0)&{\text{if))~~0\leqq H^{\prime }\!<1\\(X,C,0)&{\text{if))~~1\leqq H^{\prime }\!<2\\(0,C,X)&{\text{if))~~2\leqq H^{\prime }\!<3\\(0,X,C)&{\text{if))~~3\leqq H^{\prime }\!<4\\(X,0,C)&{\text{if))~~4\leqq H^{\prime }\!<5\\(C,0,X)&{\text{if))~~5\leqq H^{\prime }\!<6\end{cases))}$

最後に、Valueを合わせるために R₁, G₁, B₁ それぞれに m を加えると、 R, G, B が求められる。

${\displaystyle m=V-C}$

${\displaystyle (R,G,B)=(R_{1}\!+m,~G_{1}\!+m,~B_{1}\!+m)}$

HSVからRGBへ（簡略化）

Hueを H ∈ [0°, 360°) 、Saturationを S_V ∈ [0, 1] 、Valueを V ∈ [0, 1] とし、まず次の関数 f(n) を定義する。

${\displaystyle f(n)=V-VS\!\cdot \!\max \!{\big (}0,~\min(k,~4\!-\!k,~1){\big )))$

ただし、 k, n はともに0以上の実数であり、 k は次のように定義される。

${\displaystyle k={\Big (}n+{\frac {H}{60^{\circ }\!)){\Big )}{\bmod {6))}$

ここで、 k ∈ [0, 6) となる。

これらのもとで、R, G, B の値（それぞれ0以上1以下）が次のように得られる。

${\displaystyle (R,G,B)={\big (}f(5),~f(3),~f(1){\big )))$

f(n) の特性は、 ${\textstyle t(n,H)=T(k)=\max \!{\big (}0,~\min(k,~4\!-\!k,~1){\big )))$ として、HSLの場合と同様にして考察できる。

HSIからRGBへ

Hueを H ∈ [0°, 360°) 、Saturationを S_I ∈ [0, 1] 、Intensityを I ∈ [0, 1] とする。

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }\!))}$

${\displaystyle Z=1-{\big \vert }(H^{\prime }\!{\bmod {2)))-1{\big \vert ))$

${\displaystyle C={\frac {3\!\cdot \!I\!\cdot \!S_{I)){1\!+\!Z))}$

${\displaystyle X=C\!\cdot \!Z}$

ただし、 C はChromaである。

次に、RGB立方体の底面3面において、与えられた色と同じHue、Chromaをもつ点 (R₁, G₁, B₁) を求める。

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if))~H~{\text{is undefined))\\(C,X,0)&{\text{if))~~0\leqq H^{\prime }\!\leqq 1\\(X,C,0)&{\text{if))~~1\leqq H^{\prime }\!\leqq 2\\(0,C,X)&{\text{if))~~2\leqq H^{\prime }\!\leqq 3\\(0,X,C)&{\text{if))~~3\leqq H^{\prime }\!\leqq 4\\(X,0,C)&{\text{if))~~4\leqq H^{\prime }\!\leqq 5\\(C,0,X)&{\text{if))~~5\leqq H^{\prime }\!\leqq 6\end{cases))}$

最後に、Intensityを合わせるために R₁, G₁, B₁ それぞれに m を加えると、 R, G, B が求められる。

${\displaystyle m=I\!\cdot \!(1-S_{I})}$

${\displaystyle (R,G,B)=(R_{1}\!+m,~G_{1}\!+m,~B_{1}\!+m)}$

Luma, Chroma, Hue による色空間からRGBへ

Hueを H ∈ [0°, 360°) 、Chromaを C ∈ [0, 1] 、Lumaを Y'₆₀₁ ∈ [0, 1] とする。

${\displaystyle H^{\prime }={\frac {H}{60^{\circ }\!))}$

${\displaystyle X=C\times {\big (}1-{\big \vert }(H^{\prime }\!{\bmod {2)))-1{\big \vert }{\big )))$

${\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if))~H~{\text{is undefined))\\(C,X,0)&{\text{if))~~0\leqq H^{\prime }\!\leqq 1\\(X,C,0)&{\text{if))~~1\leqq H^{\prime }\!\leqq 2\\(0,C,X)&{\text{if))~~2\leqq H^{\prime }\!\leqq 3\\(0,X,C)&{\text{if))~~3\leqq H^{\prime }\!\leqq 4\\(X,0,C)&{\text{if))~~4\leqq H^{\prime }\!\leqq 5\\(C,0,X)&{\text{if))~~5\leqq H^{\prime }\!\leqq 6\end{cases))}$

Lumaを合わせるために R₁, G₁, B₁ それぞれに m を加えると、 R, G, B が求められる。

${\displaystyle m=Y_{601}^{\prime }\!-(0.30R_{1}+0.59G_{1}+0.11B_{1})}$

${\displaystyle (R,G,B)=(R_{1}\!+m,~G_{1}\!+m,~B_{1}\!+m)}$

相互変換

HSVからHSLへ

Hueを H ∈ [0°, 360°) 、Saturationを S_V ∈ [0, 1] 、Valueを V ∈ [0, 1] とする。

${\displaystyle H_{L}=H_{V))$

${\displaystyle L=V{\bigg (}1-{\frac {S_{V)){2)){\bigg )))$

${\displaystyle S_{L}={\begin{cases}0,&{\text{if))~~L\!=\!1~~{\text{or))~~L\!=\!0\\{\frac {V-L}{\min(L,~1-L))),&{\text{otherwise))\end{cases))}$

HSLからHSVへ

Hueを H ∈ [0°, 360°) 、Saturationを S_L ∈ [0, 1] 、Lightnessを L ∈ [0, 1] とする。

${\displaystyle H_{V}=H_{L))$

${\displaystyle V=L+S_{L}\min(L,~1\!-\!L)}$

${\displaystyle S_{V}={\begin{cases}0,&{\text{if))~~V\!=0\\2{\Big (}1-{\frac {L}{V)){\Big )},&{\text{otherwise))\end{cases))}$

RGBからの変換

ここに示される変換は、上述の導出方法と同じものである。 R, G, B ∈ [0, 1] とする。

最大値 X_max （すなわちValue V ）、最小値 X_min 、範囲（すなわちChroma） C 、中央値（すなわちLightness） L を、それぞれ次のように求める。

${\displaystyle X_{\textrm {max))=V=\max(R,G,B)}$

${\displaystyle X_{\textrm {min))=\min(R,G,B)=V\!-C}$

${\displaystyle C=X_{\textrm {max))-X_{\textrm {min))=2(V\!-L)}$

${\displaystyle L=\operatorname {mid} (R,G,B)={\frac {X_{\textrm {max))+X_{\textrm {min))}{2))=V-{\frac {C}{2))}$

Hue H はHSL、HSVで共通であり、次のように求められる。

${\displaystyle H:={\begin{cases}\mathrm {undefined} ,&{\text{if))~~C=0\\60^{\circ }\!\times \!{\Big (}{\frac {G-B}{C)){\bmod {6)){\Big )},&{\text{if))~~V=R\\60^{\circ }\!\times \!{\Big (}{\frac {B-R}{C))+2{\Big )},&{\text{if))~~V=G\\60^{\circ }\!\times \!{\Big (}{\frac {R-G}{C))+4{\Big )},&{\text{if))~~V=B\end{cases))}$

HSL、HSVそれぞれのSaturationは、次のように求められる。

${\displaystyle S_{V}={\begin{cases}0,&{\text{if))~~V\!=0\\{\frac {C}{V)),&{\text{otherwise))\end{cases))}$

${\displaystyle S_{L}={\begin{cases}0,&{\text{if))~~L\!=\!1~~{\text{or))~~L\!=\!0\\{\frac {C}{1-\vert 2V-C-1\vert ))={\frac {2(V-L)}{1-\vert 2L-1\vert ))={\frac {V-L}{\min(L,~1-L))),&{\text{otherwise))\end{cases))}$

脚注

注釈

1. ^ Intensityを輝度とするHSI色空間も存在する。LとIでは、定義がやや異なる。
2. ^ HSV色空間がHSB色空間と呼ばれる場合、BはBrightness（明度）を指す。これはValue（明度）と同値である。
3. ^ これらの色空間における「輝度」などの単語は、光学などの学術分野における定義とは異なることがある。詳細は後述される。
4. ^ 例えば、図2において両モデルの円柱の右下にある色   や、HSLの円柱の上部にある色   は、鮮やかであるとは言いがたい。
5. ^ カラー映像に切り替えるにあたって信号の形式を全く異なるものにすると既存の受信装置では映像を受信できなくなるかもしれないが、従来の信号（白黒映像、すなわち輝度情報のみからなる信号）に色の情報を付け加えるだけであれば、既存の受信装置でも調整なしで映像を（白黒で）受信できる。
6. ^

   

   例えば、比較的鮮やかなオレンジ色（   R=217、G=118、B=33）の彩度を下げた色   を作りたい場合、Rを31減らし、Gを24増やし、Bを59増やさなければならない。

7. ^ 強い照明のもとで見た黒い紙と暗い部屋で見た白い紙では、黒い紙のほうが絶対的には明るい（輝度が高い）かもしれないが、黒い紙の色は「暗い色」、白い紙の色は「明るい色」と認識できる。このような場合においては、「暗い」「明るい」はLightnessで表現されているといえる。
8. ^ Joblove と Greenberg （1978）と同様。
9. ^ 後述の通り、これらが厳密に角度と距離によって定義されるのは、六角形を円に変形したあとである。
10. ^ ここで「Chroma」という言葉を使うことによって、 Joblove と Greenberg （1978）の論文内容と一致するだけでなく、この用語の精神測定的な定義にも沿う。Adobe Photoshop の「Saturation」ブレンドモードのようにこの属性が「Saturation」とよばれる場合もあるが、（Chromaと比較されるような場合には特に）混同できない。
11. ^ (R, G, B)で表されるある色に対し、RGBの各成分から同じ値だけ変化させた (R + m, G + m, B + m) で表される色は、傾いたRGB立方体の中で垂直方向に移動しただけの点であるため、平面上の同じ点に投影され、同じChromaをもつ。例えば、R = G = B となる無彩色の色は黒と白を結ぶ軸上にあり、常に原点に投影される。
12. ^ ^{a b} HSLやHSVに関する論文や書籍の多くには、それらを正式に記述した公式やアルゴリズムも書かれており、この記事で示される数式はそれらをまとめたものである。Agoston (2005) や Foley (1995) を参照されたい。
13. ^ Lumaという用語に関するより具体的な議論は、Charles Poynton (2008) を参照されたい。Adobe Photoshop の「Luminosity」ブレンドモードでは、RGB色空間に関係なくNTSCの係数を使用する。
14. ^ 「Hue（色相）とChroma（クロマ）の導出」を参照。
15. ^ 「明るさを表す成分の導出」を参照。
16. ^ 「色を構成する属性」を参照。
17. ^ この表の上部9色は作為的に、残りの10色は無作為に選ばれた。
18. ^ ArcGISでは、このグラデーションを「Color ramps」と呼んでいる。2008年のバージョンではCIELABも利用できる。
19. ^ 大田らのモデルでは、 I₁ = (R + G + B) / 3, I₂ = (R − B) / 2, I₃ = (2G − R − B) / 4 であった。 I₁ は上述の I と同じである。また、α はR方向を指すのに対して I₃ はG方向を指す点と、 β の線形スケーリングが I₂ とはやや異なる点を除き、 I₂ , I₃ はそれぞれ β, α に似ている。
20. ^ 以下に挙げられる欠点の多くは、Poynton (1997) が、実例なしで文章として示したものである。
21. ^ HSLの円柱モデルでは、Saturationを「100%」にしたまま、白も緑も表現できる。

出典

1. ^ “米国特許 4694286 "Apparatus and method for modifying displayed color images"” (英語). Google Patents. 2023年3月21日閲覧。
2. ^ Tantek Çelik, Chris Lilley, L. David Baron; Steven Pemberton, Brad Pettit (2022年1月18日). “CSS Color Module Level 3” (英語). W3C Recommendation. W3C. 2023年3月22日閲覧。
3. ^ Brewer, Cynthia A. (1999年). “Color Use Guidelines for Data Representation” (英語). Proceedings of the Section on Statistical Graphics. American Statistical Association. pp. 55-60. 2023年3月22日閲覧。
4. ^ Poynton, Charles (2006年11月28日). “Color FAQ - Frequently Asked Questions Color” (英語). 2023年3月22日閲覧。

表 話 編 歴 色彩
基礎的事象	可視光 · 色覚 · 色覚異常 · 色覚恒常（英語版）
基礎的概念	色彩理論（英語版） · 色空間 · 配色 · 補色 · 暖色 · 寒色 · 加法混合 · 減法混合 · 色名 · 原色 · 純色 · 有彩色 · 無彩色 · 二次色 · 三次色（英語版） · 中間色 · ホワイトバランス · アルファブレンド
色の三属性	色相 · 彩度 · 明度
色名	基礎的な色 白 · 黒 · 赤 · 緑 · 青 · シアン/藍 · マゼンタ/紅 · 黄 代表的な二次色 紫色 · 碧色 · 橙色 · 褐色 · 灰色
分野	印刷 網点 · CMYK · 特色（スポットカラー） コンピューター 色深度 · ウェブカラー · X11の色名称
研究者	ドルトン · ヤング · プルキニェ · グラスマン · E.W.V.ブリュッケ（英語版） · ヘルムホルツ · ヘリング · ベゾルト（英語版） · マッハ · オストヴァルト · ゴールドシュタイン（英語版） · グラニト · マクアダム
表色系	混色系 CIE XYZ · CIE RGB · CIE Lab · CIE Luv · CIE Yuv · CIE UVW · CIECAM02（英語版） · オストワルト表色系 · Rec._2020 · RGB · YUV 顕色系 HSV · HSL · マンセル表色系 · NCS · PCCS
関連項目	色名一覧 · 色立体 · カラーチャート · グレースケール · ブラック・アンド・ホワイト · 蛍光色 · 言語による青と緑の違い（英語版） · 緑#緑をさす「青」 · グルーのパラドックス · 色彩調和論 · 色素 · 視覚効果 · 透明 · 無色 · 日本の色の一覧 · 日本の伝統色 · パステルカラー · バルール · パレット · パーソナルカラー · ヒトの髪の色 · ヒトの虹彩の色 · ヒトの肌の色 · 不可能な色 · 構造色 · 虹色 · 二色旗 · 三色旗