색상 변환기 — HEX, RGB, HSL 변환
디자이너와 개발자가 자주 마주치는 세 가지 색상 표기법 — HEX(#3B82F6), RGB(rgb(59, 130, 246)), HSL(hsl(217, 91%, 60%)) — 을 서로 변환합니다. 헥스코드를 입력하면 RGB·HSL 값을 바로 확인하고, 모드를 바꾸면 RGB 값으로 헥스코드를 만들 수 있습니다.
이 계산의 원리
HEX 색상은 빨강·초록·파랑 세 채널을 16진수(0~9, A~F) 6자리 문자열에 담습니다. 채널당 두 자리씩이며 각각 00부터 FF(10진수로 0~255)까지입니다. #FFF처럼 3자리 축약형은 각 자리를 두 번씩 반복한 것으로, #FFF는 #FFFFFF와 같습니다.
RGB는 같은 세 채널을 0~255 사이의 10진수로 그대로 씁니다. 그래서 rgb(59, 130, 246)과 #3B82F6은 완전히 같은 색입니다 — 59 = 0x3B, 130 = 0x82, 246 = 0xF6.
HSL은 같은 색을 다른 방식으로 표현합니다. 색상(Hue)은 0~360° 색상환에서의 위치(0=빨강, 120=초록, 240=파랑), 채도(Saturation)는 색이 얼마나 선명한지(0%=회색, 100%=완전 채도), 명도(Lightness)는 얼마나 검정 또는 흰색에 가까운지(0%=검정, 100%=흰색)를 나타내며 RGB의 최댓값·최솟값과 그 차이로 계산합니다.
예제로 이해하기
HEX vs RGB vs HSL —언제 무엇을 쓸까
| 표기법 | 예시 | 적합한 상황 |
|---|---|---|
| HEX | #3B82F6 | 디자인 툴, 브랜드 컬러 시트, CSS에 빠르게 복사-붙여넣기 |
| RGB | rgb(59, 130, 246) | 채널값을 명시하거나 rgba()로 투명도가 필요할 때 |
| HSL | hsl(217, 91%, 60%) | 색상은 유지하고 명도·채도만 조절해 팔레트를 만들 때 |
헥스 자릿수와 채널의 대응
- #RRGGBB — RR은 빨강(00~FF), GG는 초록(00~FF), BB는 파랑(00~FF)
- 각 두 자리는 16진수입니다: FF = 15×16+15 = 255, 80 = 8×16+0 = 128, 00 = 0
- #000000은 검정, #FFFFFF는 흰색, #FF0000은 순수한 빨강입니다
- 3자리 축약형은 각 자리를 두 번 반복합니다: #ABC → #AABBCC
HSL 값 한눈에 읽기
hsl(217, 91%, 60%)은 세 가지를 바로 알려줍니다: 217°는 파란 계열 색상(파랑은 대체로 210~250° 부근), 채도 91%는 탁하지 않고 선명하다는 뜻, 명도 60%는 검정과 흰색 사이 밝은 쪽에 위치해 맑고 밝은 파란색임을 나타냅니다.
이런 성질 덕에 HSL은 일관된 팔레트를 만들기 편합니다. 색상값 217은 고정한 채 명도를 20%(짙은 남색)부터 90%(연한 하늘색)까지 바꾸면 같은 색 계열의 짙고 옅은 톤 세트를 만들 수 있습니다.
자주 쓰는 기준 색상
| 이름 | HEX | RGB |
|---|---|---|
| 검정 | #000000 | rgb(0, 0, 0) |
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
| 빨강 | #FF0000 | rgb(255, 0, 0) |
| 초록 | #00FF00 | rgb(0, 255, 0) |
| 파랑 | #0000FF | rgb(0, 0, 255) |