HEX·RGB·HSL 변환

세 가지 색상 표기법을 한 번에 오가기

이 도구는 같은 색을 표현하는 세 방식인 HEX(#RRGGBB), RGB(빨강·초록·파랑 각 0~255), HSL(색상·채도·명도)을 서로 즉시 변환합니다. 입력창 중 하나에 값을 넣으면 나머지 두 표기가 동시에 갱신되므로, 예를 들어 디자인 시안에서 받은 #3B82F6을 붙여넣어 곧바로 rgb(59, 130, 246)과 hsl(217, 91%, 60%)을 함께 확인할 수 있습니다. HEX는 CSS·이미지 편집기, RGB는 캔버스·JS 코드, HSL은 색조 조정 작업에서 각각 쓰임이 달라 셋 사이를 자주 오가게 됩니다.

변환이 이뤄지는 원리

HEX와 RGB는 사실상 같은 정보입니다. HEX의 두 자리씩(RR, GG, BB)을 16진수에서 10진수로 바꾸면 그대로 RGB가 됩니다. 예를 들어 3B는 59, 82는 130, F6은 246입니다. 반대로 각 채널을 16진수 두 자리로 되돌리면 HEX가 됩니다.

RGB에서 HSL로 갈 때는 R·G·B를 0~1로 정규화한 뒤 최댓값(max)과 최솟값(min)을 구합니다. 명도 L = (max+min)/2, 채도 S는 두 값의 차(delta)를 명도에 따라 나눠 계산하며, 색상 H는 어느 채널이 최대인지에 따라 0~360°로 배치됩니다. 회색 계열처럼 R=G=B이면 delta가 0이라 채도 0%, 색상은 정의되지 않아 0°으로 표기됩니다.

이럴 때 씁니다

같은 색의 밝기나 선명도만 조절하고 싶을 때 HSL이 특히 편리합니다. HEX로는 어느 자리를 바꿔야 할지 직관적이지 않지만, HSL이면 L만 올려 더 밝은 변형색, S만 낮춰 차분한 톤을 만들 수 있습니다. 이 도구로 브랜드 색을 HSL로 바꿔 명도만 10%씩 조절하면 버튼의 hover·active 상태 색을 손쉽게 파생할 수 있습니다. 반대로 색상표에서 HSL로 고른 색을 코드에 넣을 땐 다시 HEX로 변환해 복사하면 됩니다.

정확도에 관한 팁

HSL은 각도와 백분율을 정수로 반올림해 표기하는 경우가 많아, HEX → HSL → HEX로 왕복하면 원래 값에서 1~2 정도 어긋날 수 있습니다. 색을 원본 그대로 보존해야 한다면 최종 코드는 HEX나 RGB로 관리하고, HSL은 조정용 중간 단계로만 쓰는 편이 안전합니다. HEX 입력 시 #은 생략해도 되고, #FFF 같은 3자리 축약형은 각 자리를 두 번 반복한 #FFFFFF와 같은 색입니다.