RGB → HSL 변환기란?
이 도구는 RGB 모델(빨강·초록·파랑, 각 0~255)로 표현된 색상을 HSL 모델(색상·채도·명도)로 변환합니다. HSL은 색의 색조(Hue)와 선명함(채도), 밝고 어두운 정도(명도)를 분리해서 다루기 때문에 디자이너에게 더 직관적인 경우가 많습니다. 이 변환은 특정 기기나 국가에 종속되지 않는 보편적인 계산 방식입니다.
사용 방법
변환할 색상의 빨강·초록·파랑 값을 각각 0~255 사이로 입력하세요. 계산 버튼을 누르면 대응하는 HSL 값이 나오며, CSS에 hsl(H, S%, L%) 형식으로 바로 붙여 넣을 수 있습니다.
변환 공식 설명
먼저 각 채널을 255로 나눠 0~1 범위로 정규화합니다. 세 값 중 가장 큰 값을 max, 가장 작은 값을 min이라 하고 \(\Delta = \max - \min\)으로 둡니다. 명도는 \(L = (\max + \min) / 2\) 입니다. 채도는 \(S = \Delta / (1 - \lvert 2L - 1 \rvert)\) 이며, \(\Delta = 0\)일 때(즉 회색일 때)는 0이 됩니다. 색상(Hue)은 어느 채널이 가장 큰지에 따라 계산한 뒤 60°를 곱하고, 0~360° 범위로 맞춰 줍니다.
$$ L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert} $$ $$ \text{where}\quad \left\{ \begin{aligned} R^{\prime} &= \frac{\text{Red}}{255}, \;\; G^{\prime} = \frac{\text{Green}}{255}, \;\; B^{\prime} = \frac{\text{Blue}}{255} \\ C_{\max} &= \max(R^{\prime}, G^{\prime}, B^{\prime}), \;\; C_{\min} = \min(R^{\prime}, G^{\prime}, B^{\prime}) \end{aligned} \right. $$ $$ H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases} $$
계산 예제
토마토 레드 RGB(255, 99, 71)을 예로 들어 보겠습니다. 정규화하면 \(R=1\), \(G=0.388\), \(B=0.278\) 입니다. \(\max=1\), \(\min=0.278\), \(\Delta=0.722\) 가 됩니다.
$$ L = (1 + 0.278)/2 = 0.639 \rightarrow 63.9\% $$ $$ S = \frac{0.722}{1 - \lvert 2 \cdot 0.639 - 1 \rvert} = \frac{0.722}{0.722} = 1 \rightarrow 100\% $$max가 R이므로
$$ H = 60 \times \left( \frac{0.388 - 0.278}{0.722} \right) = 60 \times 0.1525 \approx 9.13^{\circ} $$결과: hsl(9.13, 100%, 63.92%).
자주 묻는 질문
회색은 왜 채도가 0인가요? 세 채널 값이 모두 같으면 \(\Delta = 0\)이 되어 색 정보가 없습니다. 이때 채도는 수학적으로 정의되지 않으므로 관례에 따라 0으로 둡니다.
H, S, L 값은 반올림되나요? 화면에는 소수점 둘째 자리까지 표시되지만, 실제 계산값은 전체 정밀도를 그대로 유지합니다.
다시 RGB로 되돌릴 수 있나요? 네. HSL → RGB는 색상 구간(sector)과 채도(chroma)를 이용한 역변환 과정으로 가능합니다.
