HSL → RGB 색상 변환기

계산 입력

색상 (0~360°)

채도 (0~100%)

명도 (0~100%)

결과

RGB 색상

rgb(64, 128, 191)

빨강	64
초록	128
파랑	191

HSL → RGB 변환기란?

이 도구는 HSL 모델(색상 Hue, 채도 Saturation, 명도 Lightness)로 표현된 색을 화면·CSS·이미지 파일에서 쓰이는 RGB 모델로 바꿔 줍니다. HSL은 '어떤 색인지(색상)'와 '얼마나 선명한지(채도)', '얼마나 밝은지(명도)'를 따로 다루기 때문에 디자이너에게 직관적인 반면, RGB는 같은 색을 빨강·초록·파랑 빛의 양으로 나타냅니다. 변환은 정확하며, 유효한 HSL 값이라면 어떤 값이든 처리합니다.

The HSL color model: hue (angle), saturation (radius) and lightness (height).

사용 방법

색상(Hue)은 도(0~360°), 채도(Saturation)와 명도(Lightness)는 퍼센트(0~100%)로 입력하세요. 그러면 0부터 255까지의 rgb(r, g, b) 값과 함께 실시간 색상 미리보기가 표시되어, 결과를 눈으로 직접 확인할 수 있습니다.

변환 공식 설명

먼저 채도와 명도를 0~1 범위로 환산합니다. 채도(컬러풀함)를 나타내는 채도값(크로마)은 다음과 같이 구합니다.

$$C = (1 - |2L - 1|)\,S$$

보조값

$$X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)$$

는 60°씩 나뉜 색상 구간 내부의 중간 혼합을 처리하고,

$$m = L - \tfrac{C}{2}$$

는 전체 값을 원하는 명도에 맞게 보정합니다. 색상이 어느 60° 구간에 속하는지에 따라 \(C\), \(X\), \(0\) 을 \(R\), \(G\), \(B\) 에 정해진 순서로 배정한 뒤, \(m\) 을 더하고 각 채널에 255를 곱한 다음 반올림합니다.

How the intermediate values C, X and m build each RGB channel.

계산 예시

HSL(210°, 50%, 50%)인 경우: \(S = 0.5\), \(L = 0.5\).

$$C = (1 - |0|)\cdot 0.5 = 0.5$$

\(H/60 = 3.5\) 이므로 \((3.5 \bmod 2) = 1.5\),

$$X = 0.5\cdot(1 - |1.5 - 1|) = 0.25$$$$m = 0.5 - 0.25 = 0.25$$

색상 210°는 3번 구간(180~240°)에 속하므로 \((R',G',B') = (0,\ X,\ C) = (0,\ 0.25,\ 0.5)\). 여기에 \(m\) 을 더하고 \(\times 255\) 하면 \(R = 64\), \(G = 128\), \(B = 191\) → rgb(64, 128, 191) 입니다.

A single color shown as its HSL inputs and the resulting RGB output.

자주 묻는 질문

입력값의 범위는 어떻게 되나요? 색상은 0~360도, 채도와 명도는 0~100퍼센트입니다.

왜 값을 반올림하나요? RGB 채널은 0부터 255까지의 정수여야 하므로, 환산된 결과를 가장 가까운 정수로 반올림합니다.

회색도 표현할 수 있나요? 네. 채도를 0으로 두면 색상값과 상관없이 \(R\), \(G\), \(B\) 가 모두 명도값을 0~255로 환산한 값과 같아져 회색이 됩니다.