HSL과 HSV

3. 역사

대부분의 텔레비전, 컴퓨터 디스플레이, 프로젝터는 빨강, 녹색, 파랑 빛을 다양한 강도로 결합하여 색상을 표현한다. 이를 RGB 가산 원색이라고 한다. RGB 색상 공간에서 만들어진 혼합은 매우 다양한 색상(색역)을 재현할 수 있지만, 빨강, 녹색, 파란색 빛의 구성 요소의 양과 결과 색상 간의 관계는 직관적이지 않다. 특히 경험이 없는 사용자나 감산 혼합 방식의 페인트나 색조, 음영을 기반으로 한 전통적인 미술가 모델에 익숙한 사용자에게는 더욱 그렇다(그림 4).^[2] 또한, 가산 혼합 모델과 감산 혼합 모델 모두 인간의 시각과 동일한 방식으로 색상 관계를 정의하지 않는다.

1950년대부터 컬러 텔레비전 방송은 기존의 수정되지 않은 흑백 텔레비전이 컬러 방송을 수신하고 흑백 이미지를 표시할 수 있도록 "루마" 및 "크로마" 신호를 별도로 부호화하는 호환 색상 시스템을 사용했다.^[9] 1938년, 프랑스 기술자 조르주 발렌시는 흑백 (휘도 신호만 방송하는) 텔레비전 방송에 색상 정보를 추가하는 방법으로 HSL 색 공간을 개발했다.^[48] 이 방법은 NTSC, PAL, SECAM 등 주요 아날로그 텔레비전 방송 및 디지털 텔레비전 방송에 사용되며, 컴포지트 영상 신호의 기초가 되고 있다.

PARC와 NYIT의 컴퓨터 그래픽 개척자들은 더 전통적이고 직관적인 색상 혼합 모델을 수용하기 위해 1970년대 중반에 컴퓨터 디스플레이 기술을 위한 HSV 모델을 도입했고, 1978년 8월 ''컴퓨터 그래픽스''에서 앨비 레이 스미스에 의해 공식적으로 설명되었다.^[10]

4. 수학적 모델

HSL과 HSV는 모두 원기둥 형태의 기하학적 구조를 가진다(그림 2). 두 모델 모두 색상(Hue)은 0°에서 빨강 기본색으로 시작하여 120°에서 녹색, 240°에서 파랑을 거쳐 360°에서 다시 빨강으로 돌아오는 각도로 표현된다. 각 기하학에서 중앙 수직 축은 밝기 1(값 1)인 흰색에서 밝기 0(값 0)인 검은색까지의 중립적인 색상, 즉 무채색 또는 회색으로 구성된다.

두 모델 모두에서 가산 기본색과 보조색— 빨강, 노랑, 녹색, 시안, 파랑 및 자홍 —과 인접한 쌍 사이의 선형 혼합(때로는 ''순수한 색상''이라고 함)은 채도 1로 원통의 바깥쪽 가장자리를 따라 배열된다. 이러한 채도가 높은 색상은 HSL에서 밝기 0.5를 가지는 반면, HSV에서는 값 1을 갖는다. 순수한 색상을 검은색과 혼합하면 (소위 ''음영'') 채도가 변경되지 않는다. HSL에서 채도는 흰색을 사용한 ''색조''로도 변경되지 않으며, 검은색과 흰색 모두를 혼합한 경우(''톤''이라고 함)에만 채도가 1 미만이 된다. HSV에서는 색조만으로도 채도가 감소한다.

어둡거나(두 모델 모두) 매우 밝은(HSL) 거의 중립적인 색상이 완전히 채도가 높은 것으로 간주되는 채도에 대한 정의는 색상의 직관적인 개념과 충돌한다.^[47] 따라서, 채도를 반경 차원으로 사용하는 원뿔형 또는 쌍원뿔형 솔리드가 대신 그려지는 경우가 많다(그림 3). 이때, 반지름 방향의 값이 "채도"로 표현되어, "색차(Chroma)"와의 구별이 모호해지는 경우가 있다.

• HSI 색 공간: 명도(Intensity)는 ''R'', ''G'', ''B''의 평균값이다.
• $I\; =\; \backslash operatorname\{avg\}(R,\; G,\; B)\; =\; \backslash frac\{1\}\{3\}(R+G+B)$
• HSV 색 공간: 명도(Value)는 ''R'', ''G'', ''B''의 최대값이다.
• $V\; =\; \backslash max(R,\; G,\; B)\; =\; M$
• HSL 색 공간: 밝기(Lightness)는 ''R'', ''G'', ''B''의 중간값이다.
• $L\; =\; \backslash operatorname\{mid\}(R,\; G,\; B)\; =\; \backslash frac\{1\}\{2\}(M+m)$
• 루마(''Y'''): 밝기의 지표로 사용되며, 감마 보정된 ''R'', ''G'', ''B''의 가중 평균이다.
• $Y^\backslash prime\_\backslash text\{601\}\; =\; 0.299R\; +\; 0.587G\; +\; 0.114B$ (SDTV)
• $Y^\backslash prime\_\backslash text\{240\}\; =\; 0.212R\; +\; 0.701G\; +\; 0.087B$ (Adobe RGB)
• $Y^\backslash prime\_\backslash text\{709\}\; =\; 0.2126R\; +\; 0.7152G\; +\; 0.0722B$ (HDTV)
• $Y^\backslash prime\_\backslash text\{2020\}\; =\; 0.2627R\; +\; 0.6780G\; +\; 0.0593B$ (UHDTV, HDR)

4. 1. RGB에서 HSL로 변환

• 채도(Chroma) 계산:
• $C\; =\; (1\; -\; |2L\; -\; 1|)\; \backslash times\; S\_L$

• ''L''은 명도(Lightness)로, 0에서 1 사이의 값을 가진다.
• ''S_L''은 HSL 채도(Saturation)로, 0에서 1 사이의 값을 가진다.

• 중간 변수 계산:
• $H^\backslash prime\; =\; \backslash frac\{H\}\{60^\backslash circ\}$
• $X\; =\; C\; \backslash times\; (1\; -\; |H^\backslash prime\; \backslash bmod\; 2\; -\; 1|)$

• ''H''는 색상(Hue)으로, 0°에서 360° 사이의 값을 가진다.
• ''H''' mod 2는 ''H'''를 2로 나눈 나머지이다.

• RGB₁ 값 결정:
• $(R\_1,\; G\_1,\; B\_1)\; =\; \backslash begin\{cases\}$

• 최종 RGB 값 계산:
• $m\; =\; L\; -\; \backslash frac\{C\}\{2\}$
• $(R,\; G,\; B)\; =\; (R\_1\; +\; m,\; G\_1\; +\; m,\; B\_1\; +\; m)$

4. 2. RGB에서 HSV로 변환

5. 활용

HSL과 HSV는 색상 선택 도구에 주로 사용된다. 가장 간단한 형태는 각 속성에 대한 세 개의 슬라이더를 제공하는 것이지만, 대부분은 모델의 2차원 슬라이스를 표시하고 어떤 슬라이스를 표시할지 제어하는 슬라이더를 함께 제공한다. 이러한 GUI는 모델의 형태(원기둥, 육각기둥, 원뿔/쌍원뿔)에 따라 다양하게 나타난다.

5. 1. 소프트웨어

5. 2. 웹 디자인

xv의 HSV 기반 색상 수정

어도비 포토샵 2.5의 색조/채도 도구

5. 3. 이미지 분석

6. 한계점

HSL과 HSV는 RGB 색 공간을 단순 변환한 것으로, 인간의 색 지각과는 무관하게 RGB 입방체의 꼭짓점(R, G, B)이 무채색 축으로부터 등거리, 등간격으로 배치되는 대칭성을 유지한다. Lab 색 공간과 같이 지각적으로 균일한 공간에 RGB 색역을 표시하면(그림 15), 빨강, 녹색, 파랑의 지각적 밝기나 채도가 서로 다르고, 색상 또한 등간격이 아님을 알 수 있다.^[71]

7. 다른 원통형 좌표계 색 모델

HSL과 HSV는 색상이 중심 축에서 검정에서 흰색으로 이어지는 중립색과 그 축을 중심으로 하는 각도에 해당하는 색조를 갖는 원뿔 또는 구형에 맞는다고 상상한 최초의 모델은 아니었다. 이와 유사한 배열은 18세기로 거슬러 올라가며, 가장 현대적이고 과학적인 모델에서 계속 개발되고 있다.^[1] 오스트발트 색상 체계 등이 이러한 모델에 해당한다.^[1]

참조

_[1] 문서 Absolute color space
_[2] 문서 Levkowitz and Herman (1993)
_[3] 서적 Die Farbenfibel Leipzig 1916
_[4] 서적 Die Harmonie der Farben Leipzig 1918
_[5] 특허 Apparatus and method for modifying displayed color images http://www.google.co[...]
_[6] 논문 A human factors study of color notation systems for computer graphics 1982-08
_[7] 논문 An experimental comparison of RGB, YIQ, LAB, HSV, and opponent color models 1987-04
_[8] 논문 Model and representation: the effect of visual feedback on human performance in a color picker interface 1999-04
_[9] 특허 Procédé de télévision en couleurs
_[10] 문서 Smith (1978)
_[11] 문서 Joblove and Greenberg (1978)
_[12] 웹사이트 A Survey of Color for Computer Graphics http://graphics.stan[...] Course at SIGGRAPH 2001 2001-08
_[13] 논문 Interactive Computer Graphics: Flying High-Part I 1979-07
_[14] 논문 Colour Gradation, Shading and Texture Using a Limited Terminal 1984-03
_[15] 논문 Status report of the graphic standards planning committee 1979-08
_[16] 문서 Fairchild (2005)
_[17] 문서 Kuehni (2003)
_[18] 서적 Standard Terminology of Appearance E284 http://www.astm.org/[...] ASTM International 2009
_[19] 서적 International Lighting Vocabulary http://www.cie.co.at[...] CIE and IEC 2010-02-05
_[20] 문서 Poynton (1997)
_[21] 서적 Digital Color Imaging Handbook CRC Press
_[22] 문서 Smith (1978)
_[23] 문서 Hanbury and Serra (2002)
_[24] 문서 Hanbury (2008)
_[25] 논문 Symbolic fusion of luminance-hue-chroma features for region segmentation
_[26] 서적 Digital Image Processing Prentice Hall 2008
_[27] 웹사이트 What weighting of red, green and blue corresponds to brightness? http://www.poynton.c[...]
_[28] 웹사이트 Re: Luminosity channel... http://lists.apple.c[...] 2001-09-25
_[29] 문서 Cheng et al. (2001)
_[30] 웹사이트 CSS3 Color Module Level 3 http://www.w3.org/TR[...] 2008-07
_[31] 웹사이트 Working with color ramps http://webhelp.esri.[...] Environmental Systems Research Institute 2017-08-30
_[32] 웹사이트 The HSV Modification Tools http://www.trilon.co[...] 1994
_[33] 웹사이트 User Guide for Picture Window and Picture Window Pro Digital Light & Color http://www.dl-c.com/[...] 2010-01
_[34] 웹사이트 Blending Modes https://helpx.adobe.[...] Adobe Systems Incorporated 2017-02-15
_[35] 웹사이트 Compositing and Blending Level 1 https://www.w3.org/T[...]
_[36] 웹사이트 GIMP's LCH Blend Modes https://ninedegreesb[...]
_[37] 논문 Saturation, hue and normalized color Carnegie Mellon University, Computer Science Dept. Pittsburgh, PA 1976
_[38] 간행물 Color information for region segmentation
_[39] 간행물 Toward color image segmentation in analog VLSI: Algorithm and hardware https://authors.libr[...]
_[40] conference Color Use Guidelines for Data Representation http://www.personal.[...] American Statistical Association 1999
_[41] 서적 Statistical Analysis of Circular Dat https://archive.org/[...] Cambridge University Press
_[42] conference Circular Statistics Applied to Colour Images
_[43] 웹사이트 What are HSB and HLS? http://www.poynton.c[...] 1997
_[44] 문서 '''I'''ntensityを輝度とするHS'''I'''色空間も存在する。'''L'''と'''I'''では、定義がやや異なる。
_[45] 문서 HSV色空間がHS'''B'''色空間と呼ばれる場合、'''B'''は'''B'''rightness（明度）を指す。これはValue（明度）と同値である。
_[46] 문서 これらの色空間における「輝度」などの単語は、光学などの学術分野における定義とは異なることがある。詳細は[[HSL色空間とHSV色空間#色を構成する属性|後述]]される。
_[47] 문서 例えば、図2において両モデルの円柱の右下にある色 や、HSLの円柱の上部にある色 は、鮮やかであるとは言いがたい。
_[48] 문서 カラー映像に切り替えるにあたって信号の形式を全く異なるものにすると既存の受信装置では映像を受信できなくなるかもしれないが、従来の信号（白黒映像、すなわち輝度情報のみからなる信号）に色の情報を付け加えるだけであれば、既存の受信装置でも調整なしで映像を（白黒で）受信できる。
_[49] 문서 例えば、比較的鮮やかなオレンジ色（ R=217、G=118、B=33）の彩度を下げた色 を作りたい場合、Rを31減らし、Gを24増やし、Bを59増やさなければならない。
_[50] 웹사이트 米国特許 4694286 "Apparatus and method for modifying displayed color images" https://patents.goog[...] Google Patents 2023-03-21
_[51] 서적 色彩工学入門 定量的な色の理解と活用 森北出版株式会社
_[52] 서적 色彩学概説 東京大学出版会
_[53] 서적 色彩工学入門 定量的な色の理解と活用 森北出版株式会社
_[54] 서적 色彩工学入門 定量的な色の理解と活用 森北出版株式会社
_[55] 서적 色彩工学入門 定量的な色の理解と活用 森北出版株式会社
_[56] 서적 色彩工学入門 定量的な色の理解と活用 森北出版株式会社
_[57] 문서 強い照明のもとで見た黒い紙と暗い部屋で見た白い紙では、黒い紙のほうが絶対的には明るい（輝度が高い）かもしれないが、黒い紙の色は「暗い色」、白い紙の色は「明るい色」と認識できる。このような場合においては、「暗い」「明るい」はLightnessで表現されているといえる。
_[58] 문서 Joblove と Greenberg （1978）と同様。
_[59] 문서 後述の通り、これらが厳密に角度と距離によって定義されるのは、六角形を円に変形したあとである。
_[60] 문서 ここで「Chroma」という言葉を使うことによって、 Joblove と Greenberg （1978）の論文内容と一致するだけでなく、この用語の精神測定的な定義にも沿う。Adobe Photoshop の「Saturation」ブレンドモードのようにこの属性が「Saturation」とよばれる場合もあるが、（Chromaと比較されるような場合には特に）混同できない。
_[61] 문서 (''R'', ''G'', ''B'')で表されるある色に対し、RGBの各成分から同じ値だけ変化させた (''R'' + ''m'', ''G'' + ''m'', ''B'' + ''m'') で表される色は、傾いたRGB立方体の中で垂直方向に移動しただけの点であるため、平面上の同じ点に投影され、同じChromaをもつ。例えば、''R'' = ''G'' = ''B'' となる無彩色の色は黒と白を結ぶ軸上にあり、常に原点に投影される。
_[62] 문서 HSLやHSVに関する論文や書籍の多くには、それらを正式に記述した公式やアルゴリズムも書かれており、この記事で示される数式はそれらをまとめたものである。Agoston (2005) や Foley (1995) を参照されたい。
_[63] 문서 Lumaという用語に関するより具体的な議論は、Charles Poynton (2008) を参照されたい。Adobe Photoshop の「Luminosity」ブレンドモードでは、RGB色空間に関係なくNTSCの係数を使用する。
_[64] 문서 「[[HSL色空間とHSV色空間#Hue（色相）とChroma（クロマ）の導出|Hue（色相）とChroma（クロ마）の導出]]」を参照。
_[65] 문서 「[[HSL色空間とHSV色空間#明るさを表す成分の導出|밝기를 표기하는 성분의 도출]]」을 참조하십시오.
_[66] 문서 「[[HSL색 공간과 HSV색 공간#색상을 구성하는 속성|색상을 구성하는 속성]]」을 참조하십시오.
_[67] 문서 この表の上部9色は作為的に、残りの10色は無作為に選ばれた。
_[68] 웹사이트 CSS Color Module Level 3 https://www.w3.org/T[...] W3C 2022-01-18
_[69] 문서 ArcGISでは、このグラデーションを「Color ramps」と呼んでいる。2008年のバージョンではCIELABも利用できる。
_[70] 문서 大田らのモデルでは、 ''I''₁ = (''R'' + ''G'' + ''B'') / 3, ''I''₂ = (''R'' − ''B'') / 2, ''I''₃ = (2''G'' − ''R'' − ''B'') / 4 であった。 ''I''₁ は上述の ''I'' と同じである。また、''α'' はR方向を指すのに対して ''I''₃ はG方向を指す点と、 ''β'' の線形スケーリングが ''I''₂ とはやや異なる点を除き、 ''I''₂ , ''I''₃ はそれぞれ ''β'', ''α'' に似ている。
_[71] 문서
_[72] 문서
_[73] 웹사이트 Color Use Guidelines for Data Representation http://www.personal.[...] American Statistical Association 2023-03-22
_[74] 웹사이트 Color FAQ - Frequently Asked Questions Color http://poynton.ca/no[...] 2006-11-28