색상 코드 이해하기 — 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를 나타냅니다.
| HEX | RGB | 색 |
|---|---|---|
| #FF0000 | rgb(255,0,0) | 빨강 |
| #00FF00 | rgb(0,255,0) | 초록 |
| #3B82F6 | rgb(59,130,246) | 파랑 |
| #FFFFFF | rgb(255,255,255) | 흰색 |
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 = 완전 투명.
맨 앞 #에 이어 빨강(RR)·초록(GG)·파랑(BB)을 각각 16진수 두 자리로 표현합니다. 00이 가장 약하고 FF(=255)가 가장 강합니다. 예를 들어 #FF0000은 빨강 최대·초록 0·파랑 0이라 순수 빨강, #FFFFFF는 모두 최대라 흰색입니다.
표현 방식만 다를 뿐 같은 색입니다. RGB는 빨강·초록·파랑을 0~255 십진수로 적고(rgb(255,0,0)), HEX는 같은 값을 16진수로 압축해 적습니다(#FF0000). 서로 1:1로 변환됩니다.
RGB에서는 rgba(255,0,0,0.5)처럼 마지막에 0~1 사이 알파값을 더합니다. HEX에서는 뒤에 두 자리를 더한 8자리(#FF000080)로 투명도를 표현합니다. 80은 약 50% 불투명도입니다.