개요
HSL(Hue, Saturation, Lightness)과 HSV(Hue, Saturation, Value)는 색을 표현하기 위해 RGB(Red, Green, Blue) 색 공간을 보다 직관적으로 변환한 색 모델이다. 두 모델 모두 색상의 Hue(색상)를 원형 색상 휠(0°~360°)로 나타내며, Saturation(채도)는 색상의 순수함을 0%~100% 범위로 표시한다. 차이는 세 번째 축에 있다: HSL은 Lightness(명도), HSV는 Value(명도 혹은 밝기)를 사용한다.
1. HSL (Hue‑Saturation‑Lightness)
| 축 | 의미 | 값 범위 |
|---|---|---|
| Hue (H) | 색상의 기본 색, 빨강‑초록‑파랑 순환 | 0° ~ 360° |
| Saturation (S) | 색상의 채도(순수함), 0%이면 회색, 100%이면 가장 순수한 색 | 0% ~ 100% |
| Lightness (L) | 색상의 밝기, 0%이면 검정, 50%이면 중간 밝기, 100%이면 흰색 | 0% ~ 100% |
- Lightness는 색상의 가장 어두운 상태(검정)와 가장 밝은 상태(흰색) 사이의 중간값을 의미한다.
- 색상이 회색(채도 0%)일 경우, Lightness 값에 따라 검정‑회색‑흰색으로 변한다.
2. HSV (Hue‑Saturation‑Value)
| 축 | 의미 | 값 범위 |
|---|---|---|
| Hue (H) | 색상의 기본 색 | 0° ~ 360° |
| Saturation (S) | 색상의 채도, 0%이면 회색, 100%이면 가장 순수한 색 | 0% ~ 100% |
| Value (V) | 색상의 밝기(명도), 0%이면 검정, 100%이면 가장 밝은 색 | 0% ~ 100% |
- Value는 색상의 가장 밝은 상태(흰색에 가까운 색)와 가장 어두운 상태(검정) 사이를 나타낸다.
- 채도가 0%인 경우, Value에 따라 회색 음영이 결정된다.
3. 주요 차이점
| 항목 | HSL | HSV |
|---|---|---|
| 명도 정의 | Lightness는 색상의 중간 밝기(검정‑중간‑흰색) | Value는 색상의 최댓값(가장 밝은 색) |
| 색상 변환 시 직관성 | 색상의 밝기 조절이 ‘회색‑색‑흰색’ 순서로 직관적 | 색상의 밝기 조절이 ‘어두운‑색‑밝은’ 순서로 직관적(디지털 그래픽에서 흔히 사용) |
| 색상 보존 | 동일 Hue와 Saturation에서 Lightness가 50%일 때 가장 순수한 색 | 동일 Hue와 Saturation에서 Value가 100%일 때 가장 순수한 색 |
4. 활용 분야
- 디지털 그래픽: 포토샵, 일러스트레이터 등에서 색상 조절 도구에 HSL/HSV 슬라이더가 제공된다.
- 컴퓨터 비전 및 이미지 처리: 물체 검출, 색 기반 분할 등에 HSV가 선호되는 경우가 많다(밝기 변화에 강인).
- 웹 디자인: CSS 색상 표기법
hsl()과hsv()(CSS 4에서 제안)로 색을 정의한다. - 게임 엔진: Unity, Unreal Engine 등에서 색상 파라미터를 HSV 형태로 다루는 API가 존재한다.
5. 변환 식 (RGB ↔ HSL/HSV)
아래는 일반적인 변환 수식이다. 모든 수식은 0 ~ 1 범위(또는 0 ~ 255를 255로 나눈 값)에서 적용한다.
RGB → HSV
- $C_{max} = \max(R,G,B)$
- $C_{min} = \min(R,G,B)$
- $\Delta = C_{max} - C_{min}$
- Hue
- $\Delta = 0$ → H = 0°
- $C_{max}=R$ → $H = 60^\circ \times \left( \frac{G-B}{\Delta} \mod 6 \right)$
- $C_{max}=G$ → $H = 60^\circ \times \left( \frac{B-R}{\Delta} + 2 \right)$
- $C_{max}=B$ → $H = 60^\circ \times \left( \frac{R-G}{\Delta} + 4 \right)$
- Saturation $= \begin{cases}0 & C_{max}=0 \ \frac{\Delta}{C_{max}} & \text{else}\end{cases}$
- Value $= C_{max}$
RGB → HSL
- 위와 동일하게 $C_{max}, C_{min}, \Delta$ 계산
- Lightness $L = \frac{C_{max}+C_{min}}{2}$
- Saturation
- $\Delta = 0$ → S = 0
- $L < 0.5$ → $S = \frac{\Delta}{C_{max}+C_{min}}$
- $L \ge 0.5$ → $S = \frac{\Delta}{2 - C_{max} - C_{min}}$
- Hue는 HSV와 동일한 방법으로 계산한다.
(반대 변환도 위 수식의 역과정을 적용하여 구현한다.)
6. 참고 문헌 및 표준
- IEC 61966‑2‑1 (sRGB) – 색 공간 정의에 HSV/HSL 변환이 언급됨.
- CSS Color Module Level 4 –
hsl()및hsv()표기법을 정의. - W3C “Color Module” – 색 모델 비교 표 제공.
이상으로 HSL과 HSV에 대한 객관적인 개요와 주요 특성, 활용 분야, 변환 방법을 정리하였다.
