🎨 HEX RGB HSL 색상 코드 변환하는 방법

CSS나 디자인 툴에서 색을 다루다 보면 #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%)처럼 서로 다른 표기법을 마주치게 됩니다. 이 글에서는 HEX·RGB·HSL이 각각 무엇을 의미하는지, 언제 어떤 표기법이 편리한지, 그리고 하나의 색을 세 가지 방식으로 어떻게 변환하는지 정리합니다.

HEX, RGB, HSL은 각각 무엇을 나타낼까

HEX(16진수) 표기법은 #RRGGBB 형태로, 빨강(R)·초록(G)·파랑(B) 각 채널의 값을 00~FF(10진수로는 0~255) 범위의 16진수 두 자리로 나타냅니다. 예를 들어 #ffffff는 흰색, #000000은 검은색입니다. RGB 표기법은 같은 세 채널 값을 그냥 10진수로 rgb(255, 255, 255)처럼 쓴 것으로, HEX와 담고 있는 정보는 완전히 같고 표현 방식만 다릅니다. 반면 HSL은 색을 색상(Hue, 0~360도의 색상환 위치)·채도(Saturation, 0~100%의 색의 선명함)·명도(Lightness, 0~100%의 밝기)라는 전혀 다른 세 축으로 표현합니다. HEX·RGB가 빛의 삼원색을 그대로 섞는 방식이라면, HSL은 사람이 색을 인식하는 방식에 가깝게 '어떤 색조인지'와 '얼마나 밝고 진한지'를 분리해서 다룹니다.

언제 어떤 표기법이 편리할까

HEX는 가장 짧고 CSS·디자인 툴·색상 팔레트 어디서나 표준처럼 통용되기 때문에 스타일시트에 색을 지정하거나 다른 사람과 색상 코드를 공유할 때 가장 널리 쓰입니다. RGB는 R·G·B 각 채널 값을 그대로 숫자로 다루기 때문에, 두 색을 채널별로 더하거나 빼는 등 색상 값을 직접 계산해야 하는 코드(이미지 처리, 캔버스 픽셀 조작 등)에서 다루기 편합니다. HSL은 채도와 명도가 채널로 분리돼 있어서 '같은 색조를 유지하면서 더 밝게', '채도만 낮춰서 톤 다운' 같은 직관적인 조정을 숫자 하나만 바꿔서 할 수 있습니다. 예를 들어 버튼의 hover 색상을 만들 때 HEX 값을 감으로 조정하는 대신, HSL의 명도(L) 값만 몇 % 낮추면 같은 색조의 어두운 버전을 정확히 만들 수 있습니다.

실제 변환 예시

파란 계열 색상 #3b82f6을 예로 들어보겠습니다. HEX 값을 채널별로 나누면 3b(16진수) = 59, 82(16진수) = 130, f6(16진수) = 246이므로 RGB로는 rgb(59, 130, 246)이 됩니다. 이 값을 다시 HSL로 바꾸려면 R·G·B를 0~1 범위로 정규화한 뒤(0.231, 0.510, 0.965) 최댓값과 최솟값의 평균으로 명도를, 최댓값·최솟값의 차이로 채도를, 어느 채널이 최댓값인지로 색상 각도를 계산합니다. 이 과정을 거치면 #3b82f6은 hsl(217, 91%, 60%)이 됩니다. 즉 색상환에서 217도(파란색 계열), 채도 91%(선명한 색), 명도 60%(중간보다 약간 밝은 톤)라는 뜻입니다. 세 표기법 모두 정확히 같은 색을 가리키지만, 채널을 하나하나 손으로 계산하는 건 번거롭고 실수하기 쉽습니다. 색상을 하나 고르면 HEX·RGB·HSL 값을 동시에 보여주는 도구를 쓰면 이런 변환을 훨씬 정확하고 빠르게 확인할 수 있습니다.

대표 색상 HEX · RGB · HSL 변환표

자주 쓰는 색상의 세 가지 표기를 한눈에 정리한 참고표입니다(node로 변환·검증). 같은 색을 표기법만 바꾼 것으로, 값이 서로 정확히 대응합니다.

HSL의 H(색상)는 0~360°, S(채도)·L(명도)는 0~100%입니다. 무채색(검정·흰색·회색)은 채도 0%이며 H값은 의미가 없습니다.

🎨 이 작업, 도구로 바로 해보세요

HEX RGB HSL 색상 코드 변환하는 방법 — 세 가지 색상 표기법의 차이와 변환법

다른 가이드