색상 코드 이해하기 — HEX·RGB·HSL 차이와 변환법

디자인 시안이나 CSS에서 #3B82F6 같은 코드를 보면 무슨 색인지 감이 안 옵니다. 색상 코드는 컴퓨터가 색을 숫자로 표현하는 방식인데, HEX·RGB·HSL 세 가지가 가장 많이 쓰입니다. 이 글에서 각각의 의미와 변환법, 투명도 표현까지 정리합니다.

RGB — 빛의 삼원색

모니터는 빨강(R)·초록(G)·파랑(B) 빛을 섞어 색을 만듭니다. 각 색의 세기를 0~255로 표현하죠.

• rgb(255, 0, 0) → 순수 빨강
• rgb(0, 0, 0) → 검정(빛 없음), rgb(255,255,255) → 흰색(빛 최대)

HEX — 16진수로 압축한 RGB

HEX는 RGB 값을 16진수로 짧게 적은 것입니다. #RRGGBB 형태로, 각 두 자리가 R·G·B를 나타냅니다.

16진수는 0~9 다음에 A~F를 써서 한 자리로 16까지 셉니다. 그래서 FF는 255를 뜻합니다. #FFF처럼 세 자리로 줄여 쓰면 각 자리를 두 번 반복한 것(#FFFFFF)과 같습니다.

HSL — 사람이 직관적으로 다루는 색

HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 색을 표현합니다. RGB보다 "조금 더 밝게/연하게"를 직관적으로 조절하기 좋습니다.

• H(색상): 0~360° 색상환의 각도(0=빨강, 120=초록, 240=파랑).
• S(채도): 0%(회색)~100%(선명).
• L(명도): 0%(검정)~100%(흰색), 50%가 본래 색.

같은 색의 밝기 단계(버튼 hover 색 등)를 만들 때 L 값만 조절하면 돼서 디자인에서 자주 씁니다.

투명도(알파) 표현

• RGBA: rgba(255,0,0,0.5) — 마지막 0~1 값이 불투명도(0.5 = 50%).
• 8자리 HEX: #FF000080 — 뒤 두 자리가 투명도. 80 ≈ 50%, FF = 불투명, 00 = 완전 투명.

같은 색을 세 가지로 적어 보면

컬러 피커에 HEX 값을 넣었을 때 나오는 RGB·HSL 값입니다.

HEX와 RGB는 같은 숫자를 다르게 적은 것이라 서로 완전히 되돌릴 수 있습니다. DF는 223, 43은 67, 24는 36입니다. HSL은 사정이 다릅니다. 보통 정수로 적기 때문에 정수 HSL로 표현할 수 있는 색은 약 367만 가지인데 HEX는 약 1,678만 가지입니다. #DF4324를 hsl(10, 75%, 51%)로 바꿨다가 다시 HEX로 돌리면 #E04424가 나옵니다. 무작위 색 2만 개로 확인해 보니 89.7%가 이렇게 한두 단계씩 어긋났습니다(최대 채널당 4). 정확한 색을 넘겨야 할 때는 HEX나 RGB를 쓰세요.