HSL → Hex 색상 변환기

계산 입력

색상 (0–360°)

채도 (0–100%)

명도 (0–100%)

결과

헥스 색상 코드

#4080BF

빨강 (R)	64
초록 (G)	128
파랑 (B)	191
RGB	rgb(64, 128, 191)

HSL → Hex 변환기란?

이 도구는 HSL 모델 — 색상(Hue), 채도(Saturation), 명도(Lightness) — 로 표현된 색을 CSS, 디자인 소프트웨어, 웹 개발에서 사용하는 16진수(헥스) 표기법으로 변환합니다. HSL은 사람이 직관적으로 다루기 좋은데, 색상은 색상환에서 어떤 색인지를 고르고, 채도는 색의 선명함을, 명도는 얼마나 어둡거나 밝은지를 조절하기 때문입니다. 반면 헥스(예: #3F7FBF)는 브라우저와 각종 도구가 실제로 인식하는 형식입니다.

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

사용 방법

색상(Hue)을 0~360도, 채도(Saturation)를 0~100퍼센트, 명도(Lightness)를 0~100퍼센트로 입력하면, 그 결과로 나오는 헥스 코드, RGB 채널 값, 그리고 실시간 색상 미리보기를 바로 확인할 수 있습니다. 이 변환은 모든 색에 보편적으로 적용되며, 별도의 소프트웨어가 필요 없습니다.

변환 공식 풀이

변환은 먼저 채도(chroma) \(C = (1 - |2L - 1|)\cdot S\) 를 구합니다. 여기서 S와 L은 0~1 사이의 소수입니다. 보조 값 \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) 는 기본 색상 사이의 그라데이션을 처리하고, 밝기 보정값 \(m = L - \tfrac{C}{2}\) 는 결과를 올바른 명도로 끌어올립니다. 색상이 어느 60° 구간에 속하는지에 따라 (R′,G′,B′) 채널이 C, X, 0 중에서 배정됩니다. 각 최종 채널은 \(\text{round}((c^{\prime} + m)\cdot 255)\) 로 계산되며, 헥스 문자열은 R, G, B의 두 자리 16진수를 이어 붙인 것에 불과합니다.

$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$

$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$

Conversion flow: HSL values map to intermediate C, X, m, then to RGB and finally a hex string.

계산 예시

HSL(210, 50%, 50%)의 경우: \(S = 0.5\), \(L = 0.5\) 이므로 \(C = (1 - |0|)\times 0.5 = 0.5\). \(H/60 = 3.5\) 이므로 \((3.5 \bmod 2) = 1.5\) 이고 \(X = 0.5\times(1 - |0.5|) = 0.25\). \(m = 0.5 - 0.25 = 0.25\). 색상 210은 3번 구간(180~240)에 속하므로 \((R^{\prime},G^{\prime},B^{\prime}) = (0, X, C)\)가 됩니다. 따라서 \(R = \text{round}(0.25\times 255) = 64\), \(G = \text{round}(0.5\times 255) = 128\), \(B = \text{round}(0.75\times 255) = 191\) → #4080BF.

A worked example: one color shown as HSL, RGB and its resulting hex code.

자주 묻는 질문

색상 값은 한 바퀴 돌아가나요? 네 — 색상 360은 0과 똑같은 빨강이며, 이 도구는 어떤 값이든 0~360 범위로 정규화합니다.

채널 값이 다른 도구와 1 정도 차이 나는 이유는 무엇인가요? 가장 가까운 정수로 반올림하면, 소수점을 버리는(truncate) 다른 도구와 비교해 채널 값이 ±1 만큼 달라질 수 있습니다. 반올림이 더 정확한 방식입니다.

회색도 만들 수 있나요? 네 — 채도를 0으로 두면 색상 값이 무엇이든 세 채널 모두 \(\text{round}(L\times 255)\)로 동일해져 중립적인 회색이 만들어집니다.