색상코드 HSL, HSV, HWB 관계

HSV

• Hue(색상) +  Saturation(채도) + Value(명도) 으로 색상을 표현하는 모델
  • Hue (H) - 색상
    • 색상의 종류를 나타내며, 0°에서 360° 사이의 값으로 표현됩니다.
    • 0° :  빨강(Red) | 120° : 초록(Green) | 240° : 파랑(Blue)
  • Saturation (S) - 채도
    • 색상의 선명도나 강도를 나타내며, 0에서 100(또는 0에서 1) 사이의 값으로 표현됩니다.
    • 값이 높을수록 색상이 더 선명하고 뚜렷한 느낌을 주며, 낮을수록 회색에 가까워집니다. (0 은 회색, 100 은 선명한 색)
  • Value (V) - 명도
    • 색상의 밝기를 나타내며, 0에서 100(또는 0에서 1) 사이의 값으로 표현됩니다.
    • 값이 높을수록 색이 더 밝고, 낮을수록 어두운 색을 나타냅니다. (0 은 어두운 색, 100 은 밝은 색)
• HSV는 색을 다루는 데 매우 직관적이고 사용하기 쉬운 모델로, 특히 색상을 선택하고 조정하는 데 큰 도움이 됩니다.
  • 색상, 채도, 명도를 쉽게 조정할 수 있어 디자인 작업에서 주로 사용됩니다.
  • 색상을 기준으로 이미지를 분리하거나, 색의 특정 범위를 추출하는 데 유용하여 이미지를 처리하는데 적합합니다.
  • 색상 변화와 관련된 다양한 효과를 조정할 때 사용되어 게임 및 애니메이션에 사용됩니다.

HSL

• Hue(색상) +  Saturation(채도) + Lightness(명도) 으로 색상을 표현하는 모델
  • Hue (H) - 색상
    • 색상의 종류를 나타내며, 0°에서 360° 사이의 값으로 표현됩니다.
    • 0° :  빨강(Red) | 120° : 초록(Green) | 240° : 파랑(Blue)
  • Saturation (S) - 채도
    • 색상의 선명도나 강도를 나타내며, 0에서 100(또는 0에서 1) 사이의 값으로 표현됩니다.
    • 값이 높을수록 색상이 더 선명하고 뚜렷한 느낌을 주며, 낮을수록 회색에 가까워집니다. (0 은 회색, 100 은 선명한 색)
  • Lightness (L) - 명도
    • 색상의 밝기를 나타내며, 0에서 100(또는 0에서 1) 사이의 값으로 표현됩니다.
    • 값이 높을수록 색이 더 밝고, 낮을수록 어두운 색을 나타냅니다. (0 은 어두운 색, 100 은 밝은 색)

HSV와 HSL의 차이

• Hue
  • HSV와 HSL에서의 색상(Hue)은 동일하며, 차이가 없습니다.
• Saturation
  • HSV와 HSL 모두 채도의 정의는 유사하지만, 두 모델의 명도에서 차이가 나기 때문에 색상에 대한 감각이 달라질 수 있습니다.
  • HSV에서의 채도는 얼마나 강렬하고 선명한지에 대한 표현입니다. 0%일 때는 회색, 100%일 때는 색상이 가장 선명하고 강렬합니다.
  • HSL에서의 채도는 얼마나 진하거나 흐릿한지에 대한 표현입니다. 0%일 때는 회색, 100%일 때 가장 선명한 색이 됩니다.
  • 예시로, HSV (180°, 50%,100%) = HSL (180°, 100%,75%)
• Value vs Lightness
  • HSV 의 value 는 색 자체의 밝기만을 표현합니다. 색이 얼마나 어두운지 혹은 밝은지에만 영향을 미칩니다. 0%는 검정색, 100%는 가장 밝은 색을 나타냅니다.
  • HSL 의 lightness 는 색의밝고 어두운 톤을 포함한 전체적인 밝기를 의미합니다. 색이 매우 밝거나 어두울 때 색상이 어떻게 변하는지를 조정합니다. 0%는 검정색, 100%는 흰색, 50%는 가장 순수한 색을 의미합니다.
• 사용 용도
  • HSV는 색의 밝기를 주로 다루며, 색의 어두움과 밝음을 기준으로 조정하는 데 유리합니다.
    따라서, 이미지 프로세싱이나 비디오 그래픽에서 더 많이 사용됩니다.
  • HSL은 색의 전체적인 밝기를 기준으로, 색이 얼마나 밝고 어두운지에 따라 색을 조정하는 데 더 적합합니다.
    따라서, 웹 디자인이나 UI/UX 디자인에서 색의 조정이 용이하여 더 자주 사용됩니다.

HWB

• Hue(색상) + Whilte(흰색 비율) + Black(검정색 비율) 으로 색상을 표현하는 모델
  • Hue (H) - 색상
    • 색상의 종류를 나타내며, 0°에서 360° 사이의 값으로 표현됩니다.
    • 0° :  빨강(Red) | 120° : 초록(Green) | 240° : 파랑(Blue)
  • White (W) - 흰색 비율
    • 색상에 흰색을 얼마나 섞을지를 나타내는 비율입니다.
    • 0%일 경우 흰색이 전혀 섞이지 않으며, 100%일 경우 색이 완전히 흰색으로 변합니다.
  • Black (B) - 검정색 비율
    • 색상에 검정색을 얼마나 섞을지를 나타내는 비율입니다.
    • 0%일 경우 검정색이 전혀 섞이지 않으며, 100%일 경우 색이 완전히 검정색으로 변합니다.
• RGB나 HSL 모델이 주로 빛의 혼합에 의한 색을 표현하는 반면, HWB는 물리적인 색 혼합처럼 흰색과 검정색의 비율로 색을 조절하는 방식입니다.
• 사용 용도
  • 색상에 흰색과 검정색을 섞는 방식으로 디자인에서 색의 밝기와 어두움을 직관적으로 조정하는 데 유용합니다.
  • 색상에 흰색과 검정색을 섞는 방식으로 이미지의 색을 조정하거나, 특수 효과를 만들 때 유용합니다.

HSV , HSL , HWB 정리

항목	HSV	HSL	HWB
기본요소	Hue(색상) Saturation(채도) Value(명도)	Hue(색상) Saturation(채도) Lightness(명도)	Hue(색상) White(흰색 비율) Black(검정색 비율)
색상(Hue)	0° ~ 360°	0° ~ 360°	0° ~ 360°
색상 표현 방식	채도, 명도를 조정하는 방식 Value : 색 자체의 밝기를 정의하며, 색이 얼마나 밝거나 어두운지를 표현합니다.	색상, 채도, 명도를 조정하는 방식 Lightness : 색의 전체적인 밝기와 어두움을 정의하며, 색이 얼마나 밝고 어두운지를 더 세밀하게 조정합니다.	색상, 흰색, 검정색 비율로 색을 조정하는 방식 White / Black : 흰색과 검정색 비율을 통해 색의 밝기와 어두운 톤을 조정하는 방식입니다.
css에서 사용 여부	X	O	O
용도	게임 디자인	그래픽 디자인, 웹 디자인	이미지 작업, 특수효과