HEX색상 변환기
HEX, RGB, HSL 색상 형식 간 변환
HEX
#3b82f6
RGB
rgb(59, 130, 246)
R: 59 G: 130 B: 246
HSL
hsl(217, 91%, 60%)
H: 217 S: 91% L: 60%
색상 변환기 완벽 가이드
색상 변환기는 HEX, RGB, HSL 등 다양한 색상 표현 형식 간의 변환을 즉시 처리해줍니다. 웹 개발이나 UI 디자인 중 Figma에서 받은 HEX 코드를 CSS rgb()/hsl() 형식으로 변환하거나, 색상 이름(blue, tomato)의 정확한 수치를 확인할 때 유용합니다.
색공간 이해 — RGB / HSL / HSV / CMYK
- RGB (Red, Green, Blue): 빛의 가산혼합. 화면에서 색을 표현하는 기본 모델. 각 채널 0~255. 웹·앱 모든 색상의 기반입니다.
- HSL (Hue, Saturation, Lightness): 색조(0~360°)·채도(0~100%)·명도(0~100%). CSS 테마 시스템 구축에 가장 직관적입니다.
- HSV (Hue, Saturation, Value): HSL과 유사하지만 밝기 계산 방식이 다름. Photoshop, 컬러 피커에서 주로 사용.
- CMYK (Cyan, Magenta, Yellow, Key/Black): 잉크의 감산혼합. 인쇄 전용. 모니터 RGB를 인쇄하면 색이 달라질 수 있습니다.
HEX 표기법과 Alpha
| 형식 | 예시 | 투명도 | 설명 |
|---|---|---|---|
| #RRGGBB | #3b82f6 | 없음 | 기본 6자리 HEX |
| #RRGGBBAA | #3b82f680 | 50% | 8자리 HEX, AA=투명도(00~FF) |
| #RGB | #38f | 없음 | 3자리 축약형 (#3388ff와 동일) |
| rgba() | rgba(59,130,246,0.5) | 50% | CSS rgba, alpha 0~1 |
| hsl() | hsl(217,91%,60%) | 없음 | CSS HSL |
인쇄용 vs 웹용 색공간
- 웹/화면: RGB, HEX, HSL 사용. sRGB 색공간이 표준.
- 인쇄: CMYK 사용. 모니터에서 보이는 RGB 색이 인쇄 시 다르게 나올 수 있습니다.
- ICC 프로파일: 인쇄물은 Adobe RGB나 CMYK ICC 프로파일로 색상을 관리해야 합니다.
- P3 색공간: 최신 iPhone·Mac 디스플레이는 sRGB보다 넓은 Display P3를 지원합니다. CSS
color(display-p3 ...)로 지정 가능.
실전 활용 — CSS에서 HSL이 유리한 이유
- L(명도)만 바꾸면 같은 색조의 밝기 변형 생성:
hsl(217, 91%, 50%)→hsl(217, 91%, 70%) - Tailwind CSS, shadcn/ui 모두 HSL 기반 CSS 변수 시스템 사용
- 다크모드: 동일 Hue 유지하고 L 값만 반전하면 자연스러운 다크 팔레트 생성
:root { --primary: 217 91% 60%; }→hsl(var(--primary))패턴
자주 묻는 질문 (FAQ)
Q. HEX, RGB, HSL 중 무엇을 써야 하나요?
HEX는 간결해 디자인 핸드오프에 적합합니다. RGBA는 투명도가 필요할 때, HSL은 CSS 변수/테마 시스템 구축에 가장 편리합니다.
Q. HEX에 투명도를 추가하려면?
#RRGGBBAA 형식의 8자리 HEX를 사용하세요. 예: #3b82f680은 50% 투명도. 또는 rgba()를 사용하세요.
Q. Figma에서 복사한 색상이 CSS와 다르게 보이는 이유는?
Figma는 기본적으로 sRGB를 사용하지만, 최신 Mac의 P3 디스플레이에서는 색상이 더 선명하게 보일 수 있습니다. Figma 설정에서 색공간을 확인하세요.
Q. 색상 이름(blue, red)도 변환 가능한가요?
네. 140개 이상의 CSS Named Color(blue, tomato, cornflowerblue 등)를 입력하면 HEX/RGB/HSL로 변환해 줍니다.