RGB와 HSL이란?
RGB는 빨강(Red)·초록(Green)·파랑(Blue) 빛을 섞어 색을 표현하며, 각 채널은 0부터 255까지의 값을 가집니다. HSL은 같은 색을 좀 더 직관적인 세 가지 수치로 나타냅니다. 색상(Hue)은 0~360°의 색상환에서 색이 위치한 지점, 채도(Saturation)는 색의 선명한 정도(0~100%), 명도(Lightness)는 밝고 어두운 정도(0~100%)입니다. 명도나 채도를 조절하면 곧바로 "더 밝게", "더 어둡게", "더 선명하게", "더 칙칙하게"로 이어지기 때문에, 디자이너에게는 HSL이 다루기 훨씬 편한 경우가 많습니다.
변환기 사용 방법
색상의 빨강·초록·파랑 값을 각각 0에서 255 사이로 입력하세요. 계산기가 즉시 대응하는 HSL 값을 알려주며, CSS에 hsl(H, S%, L%) 형태로 바로 붙여 넣을 수 있습니다.
변환 공식 풀이
먼저 각 채널을 255로 나눠 0과 1 사이의 값으로 정규화합니다. 이 중 가장 큰 값을 max, 가장 작은 값을 min이라고 합시다. 명도는 \(L = (max + min) / 2\) 로 구합니다. 만약 max와 min이 같다면 그 색은 회색 계열이므로 채도와 색상은 모두 0이 됩니다. 그렇지 않을 때, 채도는 \(L > 0.5\)인 경우 \((max - min) / (2 - max - min)\), \(L \le 0.5\)인 경우 \((max - min) / (max + min)\) 으로 계산합니다. 색상은 어느 채널이 최댓값인지에 따라 결정되며 도(°) 단위(0~360)로 변환됩니다.
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$
$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$
$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
계산 예제
토마토 레드 RGB(255, 99, 71)을 예로 들어 보겠습니다. 정규화하면 (1.0, 0.388, 0.278)이 됩니다. \(max = 1.0\), \(min = 0.278\)이므로 \(L = 0.639 \to 63.9\%\)입니다. \(L > 0.5\)이므로 $$S = (1.0 - 0.278) / (2 - 1.0 - 0.278) = 0.722 / 0.722 = 1.0 \to 100\%$$입니다. 최댓값이 빨강이므로 $$H = 60 \times ((0.388 - 0.278) / 0.722) = 60 \times 0.1525 = 9.1^{\circ}$$입니다. 결과는 hsl(9, 100%, 64%)입니다.
자주 묻는 질문
회색 계열의 색상 값은 왜 0인가요? 빨강·초록·파랑 값이 모두 같으면 우세한 색이 없어 색상이 정의되지 않으며, 관례상 0으로 표기합니다.
HSL과 HSV/HSB는 같은 건가요? 아닙니다. HSL과 HSV는 색상은 공유하지만 채도와 세 번째 값을 다른 방식으로 계산합니다. 이 도구는 HSL 값을 출력합니다.
결과를 CSS에 바로 붙여 넣어도 되나요? 네. 최신 브라우저는 hsl(9, 100%, 64%)를 색상 값으로 그대로 인식합니다.
