HEX to HSL 색상 변환기란?
이 도구는 16진수 색상 코드(CSS와 디자인 프로그램에서 흔히 쓰는 #RRGGBB 표기)를 HSL 색상 모델 — 색상(Hue), 채도(Saturation), 명도(Lightness)로 변환합니다. HSL은 HEX나 RGB보다 더 직관적인 경우가 많은데, 사람이 색을 인식하는 방식 그대로 색을 설명하기 때문입니다. 즉 어떤 색인지(색상), 얼마나 선명한지(채도), 얼마나 밝거나 어두운지(명도)를 나타냅니다. 표준 sRGB HEX 표기를 따르는 모든 RGB 기반 색상에 보편적으로 사용할 수 있으며, 특정 국가나 별도의 표준에 종속되지 않습니다.
사용 방법
#3498DB처럼 HEX 색상 값을 입력하세요. 맨 앞의 #는 넣어도 되고 생략해도 됩니다. 또한 #0AF와 같은 세 자리 단축형은 자동으로 #00AAFF로 확장됩니다. 변환기는 이에 해당하는 HSL 값과 함께 디코딩된 빨강·초록·파랑 채널 값(0~255)을 함께 보여줍니다.
변환 공식 자세히 보기
먼저 HEX 값을 빨강·초록·파랑 바이트로 나눈 뒤, 각 값을 255로 나누어 0~1 범위로 정규화합니다. 이 세 값 중 가장 큰 값을 max, 가장 작은 값을 min이라고 합시다. 명도는 단순히 둘의 평균입니다: \(L = (\max + \min) / 2\). 채도는 max와 min이 같을 때(회색) 0이 됩니다. 그렇지 않은 경우, L > 0.5이면 \(S = (\max - \min) / (2 - \max - \min)\), 그 외에는 \(S = (\max - \min) / (\max + \min)\)입니다. 색상(Hue)은 어느 채널이 최댓값인지에 따라 달라지며, 60을 곱해 각도(도)로 환산합니다.
$$L = \frac{\max + \min}{2}, \quad S = \begin{cases} \dfrac{\max - \min}{2 - \max - \min}, & L > 0.5 \\[0.6em] \dfrac{\max - \min}{\max + \min}, & L \le 0.5 \end{cases}$$
$$\text{where}\quad \left\{ \begin{aligned} (R,G,B) &= \frac{\text{RGB from }\text{Hex Color}}{255} \\ \max &= \operatorname{max}(R,G,B),\ \min = \operatorname{min}(R,G,B) \end{aligned} \right.$$
$$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
계산 예시
#3498DB를 예로 들어 보겠습니다: \(R = 52\), \(G = 152\), \(B = 219\). 정규화하면 \(r \approx 0.2039\), \(g \approx 0.5961\), \(b \approx 0.8588\). \(\max = b = 0.8588\), \(\min = r = 0.2039\)이므로 \(L = 0.5314\)(53.14%)입니다. L > 0.5이므로 $$S = \frac{0.6549}{2 - 1.0627} = 0.6987\ (69.87\%)$$입니다. 파랑이 최댓값이므로 $$H = 60 \times \left(4 + \frac{0.2039 - 0.5961}{0.6549}\right) = 60 \times 3.4011 \approx 204.07^{\circ}$$입니다. 결과: hsl(204, 70%, 53%).
자주 묻는 질문
단축형 HEX도 입력할 수 있나요? 네 — #F0C와 같은 세 자리 코드는 자동으로 확장됩니다.
HSL 값이 정확한가요? 색상·채도·명도는 모두 전체 정밀도로 계산되며, 화면에 표시할 때만 반올림됩니다. 반올림하지 않은 원본 값도 확인할 수 있습니다.
맨 앞의 # 기호가 꼭 필요한가요? 아니요. 변환기는 #가 있든 없든 모두 처리합니다.
