색상 코드 변환·팔레트
HEX·RGB·HSL 상호 변환과 팔레트 생성
3자리(#4cf)·6자리 모두 가능하며 # 는 생략해도 됩니다.
변환 결과
#4C5FD5
명도 팔레트 (Shades & Tints)
유사색 (Analogous)
색을 고르거나 HEX 코드를 입력해 주세요.
색상 코드 변환기란?
색상 코드 변환기는 색상 피커로 고르거나 HEX 코드를 직접 입력하면, 같은 색을 HEX·RGB·HSL 세 가지로 바로 바꿔 보여줍니다. 입력한 색을 기준으로 명도(Shades·Tints)와 유사색(Analogous) 팔레트도 같이 뽑아 줍니다. 웹·앱 디자인이나 CSS 작업에서 배색을 잡을 때 쓰기 좋습니다.
표기법 차이
HEX — #RRGGBB 16진수 표기. 빨강·초록·파랑을 각각 00~FF(0~255)로 나타냅니다.
RGB — rgb(r, g, b), 각 채널 0~255.
HSL — hsl(h, s%, l%), 색상(Hue) 0~360°·채도(Saturation)·명도(Lightness). 색을 감각적으로 조정할 때 편리합니다. 세 표기 모두 같은 색을 다른 방식으로 나타냅니다.
팔레트 활용
- 명도(Shades·Tints) — 같은 색상·채도에서 명도(L)를 10%~90%로 바꾼 9단계. 어두운 그림자색부터 밝은 배경색까지 한 눈에 고릅니다.
- 유사색(Analogous) — 색상환에서 ±30°·±60° 인접한 색. 조화로운 배색을 만들 때 씁니다.
HEX→RGB→HSL 변환 원리 (실계산 검산)
HEX는 각 2자리 16진수를 10진수로 바꾸면 바로 RGB가 됩니다. 예를 들어 #2ecc71은 2e=46, cc=204, 71=113이므로 RGB로는 rgb(46, 204, 113)입니다. RGB를 HSL로 바꾸려면 먼저 R·G·B를 0~1로 정규화한 뒤 최댓값·최솟값의 차로 명도(L)와 채도(S)를 구하고, 어느 채널이 최댓값인지에 따라 색상각(H)을 계산합니다.
| 단계 | 계산 | 결과 |
|---|---|---|
| HEX→RGB | 0x2e=46, 0xcc=204, 0x71=113 | rgb(46, 204, 113) |
| 정규화 | 46/255=0.180, 204/255=0.800, 113/255=0.443 | max=0.800(G), min=0.180(R) |
| 명도 L | (max+min)/2 = (0.800+0.180)/2 | 0.49 → 49% |
| 채도 S | L>0.5 아니므로 (max-min)/(max+min) | 0.632 → 63% |
| 색상 H | max가 G이므로 60×((B-R)/d+2) | 145° |
따라서 #2ecc71은 hsl(145, 63%, 49%)가 되며, 위 도구에 같은 값을 입력하면 동일한 결과를 확인할 수 있습니다.
HSL이 색 조정에 유리한 이유
HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)를 축으로 분리해 사람이 색을 인식하는 방식에 가깝게 표현합니다. RGB에서 색을 더 밝게 하려면 R·G·B 세 값을 모두 비율에 맞게 조정해야 하지만, HSL에서는 L 값 하나만 올리면 같은 색상·채도를 유지한 채 밝기만 바뀝니다. 이 도구의 "명도 팔레트(Shades·Tints)"가 L만 10%~90%로 바꿔 9단계를 만드는 것도 같은 원리입니다. 마찬가지로 채도를 낮춰 차분한 톤을 만들거나, 색상(H)만 ±30°·±60° 돌려 유사색을 찾을 때도 HSL 쪽이 RGB보다 훨씬 직관적입니다.