RGB to HSL 색상 변환기

색상(H) 값은 색이 색상환에서 어느 위치에 있는지를, 채도(S)는 색이 얼마나 선명하거나 흐릿한지를, 명도(L)는 검정이나 흰색에 얼마나 가까운지를 나타냅니다. 이 세 값은 CSS에서 hsl(H, S%, L%) 형태로 바로 사용할 수 있습니다.

먼저 R, G, B 값을 0~1 범위로 스케일링합니다. 명도(L)는 가장 높은 채널과 가장 낮은 채널의 평균입니다. 채도(S)는 채널 간 차이를 명도에 대해 상대적으로 나타낸 값이며, 색상(H)은 어느 채널이 가장 높은지에 따라 0~360도 범위에서 계산됩니다.

• R, G, B 값을 255로 나누어 0~1 범위로 스케일링합니다.
• 스케일링된 값 중 가장 큰 값(max)과 가장 작은 값(min)을 찾습니다.
• 명도(L)는 max와 min 값의 평균으로 계산됩니다.
• 채도(S)는 max-min 차이를 명도에 대해 정규화하여 구합니다.
• 색상(H)은 어느 채널(R, G, B)이 가장 높은지에 따라 0~360도 범위에서 계산됩니다.

R=52, G=152, B=219(선명한 파란색)는 약 H=204도, S=70%, L=53%에 해당합니다.

• R, G, B는 0에서 255 사이의 정수로 입력하세요. 이 범위를 벗어난 값은 유효한 색상이 아닙니다.
• 색상(H)은 0~360도 색상환 위의 위치를 나타냅니다. 0은 빨강, 120은 초록, 240은 파랑을 의미합니다.
• 채도와 명도는 백분율로 표시됩니다. 채도 0%는 회색조를, 명도 100%는 흰색을 의미합니다.

RGB(빨강, 초록, 파랑) 모델은 화면이 빛을 방출해 색을 만드는 방식을 그대로 반영합니다. 각 채널은 0에서 255 사이의 강도 값을 가지며, 세 채널을 조합하면 수백만 가지의 서로 다른 색을 만들어낼 수 있습니다. 하지만 색을 '더 밝게' 또는 '더 선명하게' 만들고 싶을 때는 세 채널을 동시에 조정해야 하므로 이 모델은 직관적이지 않습니다.

반면 HSL(색상, 채도, 명도) 모델은 사람의 눈이 색을 인식하는 방식으로 색을 설명합니다. 색상은 그 색이 무엇인지(빨강, 초록, 보라)를, 채도는 얼마나 선명한지를, 명도는 얼마나 밝거나 어두운지를 나타냅니다. 그래서 디자이너와 개발자는 색상 팔레트를 만들 때 HSL을 선호하는 경우가 많습니다.

이 도구는 입력한 RGB 값을 0~1 범위로 스케일링한 다음, 가장 높은 채널 값과 가장 낮은 채널 값을 찾아 명도와 채도를 계산합니다. 이어서 어느 채널이 지배적인지를 판단하여 색상환 위에서 색상의 정확한 위치를 찾습니다.

HSL 형식의 가장 큰 장점은 CSS에서 hsl(색상, 채도%, 명도%) 형태로 바로 사용할 수 있다는 점입니다. 예를 들어 브랜드의 주 색상을 더 어두운 버전으로 만들려면 명도 값만 낮추면 됩니다. RGB에서는 세 채널을 각각 다시 계산해야 합니다.

이러한 색상 변환은 웹 디자인, 로고 작업, 데이터 시각화, UI 테마 시스템에서 흔히 사용됩니다. RGB를 HSL로 변환하는 것은 라이트/다크 테마 변형이나 일관된 색상 팔레트를 만들고자 하는 개발자에게 실용적인 출발점이 됩니다.