HSL을 Hex로 변환 — 온라인 색상 변환기

결과

헥스 색상 코드

#4080BF

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

HSL → Hex 변환기란?

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

HSL color model shown as a cylinder with hue around the circumference, saturation along the radius and lightness up the vertical axis — 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.$$

Flat process diagram showing HSL values transformed into RGB channels and then into a hex code — 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.