Color Space 시리즈 - HSL HSV

 

HSL

휘색(Hue)

휘색은 색상의 종류를 나타내는 각도로 표현되며,
휘색은 빨강, 노랑, 초록, 파랑, 남색, 보라 등의 기본적인 색상을 나타냅니다.

0도부터 360도까지의 값을 가질 수 있습니다.

예를 들어, 빨간색은 0도, 노란색은 60도, 초록색은 120도,

파란색은 240도 등으로 표현됩니다.

 

채도(Saturation)

채도는 색상의 순수도를 나타냅니다.
채도 값은 0%에서 100% 사이의 값을 가집니다.
100%일 때 색상은 최대 순수도를 가지게 되고,
0%일 때 색상은 회색으로 표현됩니다.

 

밝기(Lightness)

밝기는 색상의 밝기를 나타냅니다.
밝기 값은 0%에서 100% 사이의 값을 가집니다.
0%일 때 색상은 완전한 검은색으로 표현되고,
100%일 때 색상은 완전한 흰색으로 표현됩니다.

 

hsl() - CSS: Cascading Style Sheets | MDN

 

HSV

휘색(Hue)

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

 

채도(Saturation)

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

 

값(Value)

색상의 밝기를 나타내는 값입니다.
0%는 완전한 검정색, 100%는 완전한 흰색을 의미합니다.
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의 차이점은

색상의 휘색, 채도, 그리고 밝기 간의 관계를 표현하는 방식의 차이입니다.

하지만, 두 것 모두 비슷한 목적으로 사용됩니다.

 

 

---

 

 

Color Space 시리즈 - HSL HSV