HSL → RGB 색상 변환기

계산 입력

색상 (0~360°)

채도 (0~100%)

명도 (0~100%)

결과

RGB 색상

rgb(102, 153, 204)

빨강 (R)	102
초록 (G)	153
파랑 (B)	204

HSL → RGB 변환기란?

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)의 약자로, 색을 직관적으로 표현하는 방식입니다. 색상은 색상환에서의 각도(0~360°)를, 채도는 색의 선명함(0~100%)을, 명도는 색이 밝은지 어두운지(0~100%)를 나타냅니다. 반면 RGB는 같은 색을 빨강(Red)·초록(Green)·파랑(Blue) 세 채널로 표현하며, 각 값은 0부터 255까지입니다. 이 형식은 화면, CSS, 이미지 파일에서 두루 쓰입니다. 이 변환기는 HSL 색상을 정확히 대응하는 RGB 값으로 바꿔 줍니다.

HSL 색상 모델: 색상은 각도, 채도는 축으로부터의 거리, 명도는 수직 축으로 나타냅니다.

사용 방법

색상은 각도(도)로, 채도와 명도는 각각 퍼센트(%)로 입력하세요. 계산기는 곧바로 대응하는 rgb(r, g, b) 값을 보여 주고, 실시간 미리보기 색상 견본까지 표시해 색을 눈으로 바로 확인할 수 있습니다.

변환 공식 풀이

먼저 S와 L을 0~1 사이의 소수로 바꿉니다. 채도(색의 강도)에 해당하는 크로마는 \(C = (1 - |2L - 1|)\cdot S\)로 구합니다. 중간 성분 값은 \(X = C\,(1 - |(H/60 \bmod 2) - 1|)\)이며, 매치 값 \(m = L - C/2\)는 전체 값을 올바른 명도로 보정합니다. 색상은 60°씩 6개의 구간으로 나뉘고, 각 구간마다 C·X·0이 R, G, B 자리에 정해진 순서대로 배정됩니다. 마지막으로 각 성분에 m을 더한 뒤 255를 곱하고 가장 가까운 정수로 반올림합니다.

$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$ $$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\,(1 - |(H/60 \bmod 2) - 1|) \\ m &= L - \tfrac{C}{2} \\ S &= \frac{\text{Saturation }(\%)}{100},\quad L = \frac{\text{Lightness }(\%)}{100} \\ H &= \text{Hue }(^{\circ}) \end{aligned} \right.$$

계산 예시

HSL(210°, 50%, 60%)의 경우: \(S = 0.5\), \(L = 0.6\). \(C = (1 - |1.2 - 1|) \times 0.5 = (1 - 0.2) \times 0.5 = 0.4\). \(H/60 = 3.5\)이므로 \(X = 0.4 \times (1 - |3.5 \bmod 2 - 1|) = 0.4 \times (1 - 0.5) = 0.2\). \(m = 0.6 - 0.2 = 0.4\). 구간 3(\(3 \le H/60 < 4\))에서는 \((R',G',B') = (0, X, C) = (0, 0.2, 0.4)\)이 됩니다. 여기에 m을 더하면 \((0.4, 0.6, 0.8)\)이고, 255를 곱하면 (102, 153, 204)입니다.

변환 예시는 입력한 HSL 값과 변환된 RGB 색상 견본을 보여줍니다.

자주 묻는 질문

RGB 숫자가 왜 반올림되나요? RGB 채널은 0부터 255까지의 정수이기 때문에, 비율로 계산한 값을 가장 가까운 정수로 반올림합니다.

채도가 0%이면 어떤 색이 나오나요? 채도가 완전히 빠진 색은 회색이며, 그 값은 명도에만 좌우됩니다. 즉 R, G, B 세 채널 값이 모두 같아집니다.

360을 넘는 색상 값을 입력하면 자동으로 순환하나요? 네. 색상은 360으로 나눈 나머지(modulo 360)로 처리되므로 370°는 10°와 동일하게 동작합니다.