HSL HSV LCH - ChoDragon9/posts GitHub Wiki

HSL HSV

https://programmingdesignsystems.com/color/color-models-and-color-spaces/index.html

HSL

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• 휘색(Hue)
  • HSL 모델에서 휘색은 색상의 종류를 나타내는 각도로 표현됩니다. 각도는 0°부터 360°까지의 값을 가집니다.
  • 색상판의 각도로 표현되며, 휘색은 빨강, 노랑, 초록, 파랑, 남색, 보라 등의 기본적인 색상을 나타냅니다.
  • 0도부터 360도까지의 값을 가질 수 있습니다. 예를 들어, 빨간색은 0도, 노란색은 60도, 초록색은 120도, 파란색은 240도 등으로 표현됩니다.
• 채도(Saturation)
  • 채도는 색상의 순수도를 나타냅니다. 채도 값은 0%에서 100% 사이의 값을 가집니다. 100%일 때 색상은 최대 순수도를 가지게 되고, 0%일 때 색상은 회색으로 표현됩니다.
  • 색상의 순수도를 표현하며, 0%는 회색을, 100%는 최대 순수도의 색상을 나타냅니다.
• 밝기(Lightness)
  • 밝기는 색상의 밝기를 나타냅니다. 밝기 값은 0%에서 100% 사이의 값을 가집니다. 0%일 때 색상은 완전한 검은색으로 표현되고, 100%일 때 색상은 완전한 흰색으로 표현됩니다.
  • 색상의 밝기를 나타내는 값입니다. 0%는 완전한 검정색, 50%는 중간 밝기, 100%는 완전한 흰색을 의미합니다.

HSV

• 휘색(Hue)

  • 색상의 종류를 나타내는 각도 값입니다. 360도의 색상판을 기준으로 하며, 0도부터 360도까지의 값을 가질 수 있습니다. 예를 들어, 빨간색은 0도, 노란색은 60도, 초록색은 120도, 파란색은 240도 등으로 표현됩니다.

• 채도(Saturation)

  • 색상의 정화도를 나타내는 값입니다. 0%는 회색, 100%는 최대 정화도를 의미합니다. 정화도가 높을수록 색상은 더 진해집니다.

• 값(Value)

  • 색상의 밝기를 나타내는 값입니다. 0%는 완전한 검정색, 100%는 완전한 흰색을 의미합니다.
  • Value 값은 색상의 밝기만을 나타내며, 휘색(Hue)와 채도(Saturation)에 따른 색상의 변화에는 영향을 미치지 않습니다. Value 값은 특정 색상의 밝기를 조절하거나 흐릿한 색상을 만드는 데 사용됩니다.

HSL vs HSV Color Model

HSL(Hue, Saturation, Lightness)와 HSV(Hue, Saturation, Value)는 컴퓨터 그래픽스와 디지털 영상 처리에서 사용되는 색상 모델입니다.

두 모델의 차이점은 휘색(hue), 채도(saturation), 그리고 세 번째 구성 요소(lightness 또는 value) 사이의 관계를 표현하는 방식에 있습니다.

HSL에서 휘색은 색상판에서의 각도이고, 채도는 중심으로부터의 거리이며, 밝기(lightness)는 색상의 밝기(0 = 검정색, 1 = 흰색)입니다.

HSV에서 휘색은 색상판에서의 각도이고, 채도는 색상의 순수도이며, 값(value)은 색상의 밝기(0 = 검정색, 1 = 최대 밝기)입니다.

결국, HSL과 HSV의 차이점은 색상의 휘색, 채도, 그리고 밝기 간의 관계를 표현하는 방식의 차이입니다. 하지만, 두 것 모두 비슷한 목적으로 사용됩니다.

perceptually uniform color space

https://github.com/hsluv/hsluv

LCH

• https://css.land/lch/
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch

LCH (Lightness, Chroma, Hue)는 색상 공간의 일종입니다. LCH 공간에서는 밝기(Lightness)는 큐브의 수직축으로 표현되며, 채도(Chroma)와 휘색(Hue)는 큐브의 수평축으로 표현됩니다.

LCH 공간은 채도(Chroma)를 직접적으로 나타내기 때문에 RGB, CMYK 등과 같은 색상 공간에서의 채도 값의 정의와 다릅니다. 채도(Chroma) 값은 휘색(Hue)와 밝기(Lightness) 값에 의존하지 않습니다. 따라서, LCH 공간에서 색상의 이질성을 더 잘 나타낼 수 있습니다.

출력 장치에서의 색상 표현을 위해서는 LCH 공간에서 RGB나 CMYK 등의 색상 공간으로 변환이 필요합니다.

• Lightness (L): Lightness는 색상의 밝기를 나타낸다. 0에 가까울수록 검은색, 100에 가까울수록 밝은색을 의미한다.
• Chroma (C): Chroma는 색상의 정도를 나타낸다. Chroma 값이 높을수록 색상이 밝고 진하게 표현되고, Chroma 값이 낮을수록 색상이 약하게 표현된다.
• Hue (H): Hue는 색상의 위치를 나타낸다. Hue 값이 0도에 가까울수록 빨간색, 120도에 가까울수록 녹색, 240도에 가까울수록 파란색을 의미한다.

LAB

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab

LAB (CIELAB) color space는 1976년에 CIELAB 공간으로 개발된 perceptually uniform color space입니다. LAB 공간은 L (Lightness)와 a, b (색조) 두 개의 축으로 구성되어 있습니다.

L 축은 밝기를 나타냅니다. a 축은 초록에서 빨강의 색상을 나타냅니다. b 축은 파랑에서 노랑의 색상을 나타냅니다.

LAB 공간은 device independent color space이며, 색감을 고려한 공간입니다. 따라서, LAB 공간에서의 색상 변화는 사람이 보는 것처럼 자연스럽게 보여집니다.

LAB 공간은 이미지 처리, 색상 구분, 색상 매칭 등의 분야에서 널리 사용되고 있습니다.

참고자료

• chatGPT
• LCH is the best color space! - ATMOS
• LCH colors in CSS: what, why, and how?
• Perceptually uniform color spaces