Skip to content

Color Space 시리즈 - HSL HSV

HSL

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

휘색(Hue)

휘색은 색상의 종류를 나타내는 각도로 표현되며, 휘색은 빨강, 노랑, 초록, 파랑, 남색, 보라 등의 기본적인 색상을 나타냅니다. 0도부터 360도까지의 값을 가질 수 있습니다. 예를 들어, 빨간색은 0도, 노란색은 60도, 초록색은 120도, 파란색은 240도 등으로 표현됩니다.

채도(Saturation)

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

밝기(Lightness)

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

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의 차이점은 색상의 휘색, 채도, 그리고 밝기 간의 관계를 표현하는 방식의 차이입니다. 하지만, 두 것 모두 비슷한 목적으로 사용됩니다.