색상 변환 가이드 — HEX, RGB, HSL을 디자이너가 골라 쓰는 이유
화면의 모든 색은 여러 방식으로 표현할 수 있습니다 — HEX 코드, RGB 트리플렛, HSL 값, OKLCH, 인쇄용 CMYK. 각 표기법은 어떤 작업은 쉽게, 다른 작업은 거의 불가능하게 만듭니다. 이 가이드는 형식들과, 언제 어떤 것을 쓸지, 변환 규칙을 정리합니다.
디지털 화면의 색은 결국 세 숫자입니다 — 빨강·초록·파랑 빛을 얼마나 섞을지. 이 세 숫자를 적는 방법(HEX, RGB, HSL)은 같은 것을 다르게 표현한 것이며, 각자 다른 종류의 작업에 최적화되어 있습니다. HEX(#FF6B35)는 짧고 CSS에서 가장 흔합니다. RGB(255, 107, 53)은 화면이 실제 작동하는 방식에 가깝죠. HSL은 사람이 색을 인지하는 방식 — 색상·채도·명도 — 으로 표현합니다.
세 가지 모두 이해해야 하는 이유는, 한 형식에서 어색한 작업이 다른 형식에선 쉽기 때문입니다. '이 색을 10% 더 밝게'는 HEX에선 어렵지만 HSL에선 쉽습니다. '투명한 버전 만들기'는 RGB(A)에선 쉽지만 HEX에선 변환 없이 불가능. 디자이너는 작업에 따라 형식을 자유롭게 오갑니다.
5가지 주요 색상 형식
- HEX (#FF6B35)
- 16진수 6자리로 빨강·초록·파랑을 00~FF(0~255)로 표현. 짧고 CSS에서 보편적이지만 변환 없이는 사람에게 직관적이지 않음.
- RGB (255, 107, 53)
- 빨강·초록·파랑을 0~255로 표기. 화면의 기본 형식. RGBA는 투명도(0=투명, 1=불투명)까지 추가.
- HSL (15°, 100%, 60%)
- 색상(0~360°), 채도(0~100%), 명도(0%=검정, 100%=흰색). 직관적으로 조작하기 쉬움.
- OKLCH (70%, 0.18, 30°)
- 지각적으로 균일한 색공간. HSL의 모던 대안. 같은 숫자 변화가 같은 시각 변화를 만들어서 디자인 도구가 채택하는 추세.
- CMYK (0%, 58%, 79%, 0%)
- Cyan·Magenta·Yellow·Black. 인쇄용. 잉크가 흰 종이에서 빛을 빼는 방식이라 화면 RGB와 다름. 모든 RGB 색을 표현 못함.
어떤 작업엔 어떤 형식이 좋은가
| 작업 | 최적 형식 | 이유 |
|---|---|---|
| CSS에 색상 붙여넣기 | HEX 또는 RGB | 둘 다 보편 지원, HEX가 더 짧음 |
| 색을 더 밝거나 어둡게 | HSL 또는 OKLCH | 명도만 조절, 색상·채도는 그대로 |
| 색상 팔레트 만들기 (보색·인접색) | HSL 또는 HCL | 색상이 단일 회전값 |
| 투명도 추가 | RGBA 또는 HSLA | HEX는 8자리(#FF6B35CC) 형태로 가능하나 가독성 떨어짐 |
| 인쇄 디자인 | CMYK | 프린터가 실제 섞는 잉크 |
| 접근성·콘트라스트 검사 | RGB | 콘트라스트 공식이 선형 RGB에 작동 |
| 디자이너 친화적 변형 | OKLCH | 같은 수치 차이가 같은 시각 차이 |
HEX와 RGB가 서로 어떻게 매핑되나
HEX 두 자리씩이 16진수로 0~255 값. #FF6B35를 FF(빨강), 6B(초록), 35(파랑)로 분리. 16진수 FF = 10진수 255, 6B = 107, 35 = 53. 그래서 #FF6B35 = RGB(255, 107, 53).
역방향도 같은 방식: 각 RGB 값을 16진수로 변환, 두 자리로 패딩, 이어붙이기. 0 → 00, 255 → FF, 그 사이는 비례. 이 계산기는 자동으로 변환 — 어떤 형식의 색이든 붙여넣으면 모든 형식을 동시에 표시합니다.
거의 모든 디자인을 개선하는 색상 팁
- •기본 색상 하나를 정하고 고수. 30가지 색을 쓰는 사이트는 어수선해 보임. 3가지 색조만 명도 변화로 사용한 사이트가 더 디자인된 느낌.
- •변형은 HSL로. 같은 색상·채도, 명도만 바꿔서 호버·비활성·구분선 색을 만들기.
- •콘트라스트 항상 체크. 본문은 4.5:1 이상이 접근성 기준. 콘트라스트 체커 도구 활용.
- •순수한 검정(#000000) 피하기. 잘 디자인된 사이트는 #111이나 #222 같은 근접 검정 사용. 순수 검정은 주변 UI보다 무거워 보임.
- •순수 빨강(#FF0000)·파랑(#0000FF) 절제. 둘이 옆에 있으면 시각 진동을 일으키고 아마추어처럼 보임. 약간 채도를 낮춘 변종이 더 디자인된 느낌.
자주 묻는 질문
왜 어떤 색은 화면에선 보이는데 인쇄에선 안 나오나요?
화면은 빛을 더하는 RGB라 밝고 채도 높은 색을 만들 수 있음. 프린터는 종이 위 잉크를 빼는 CMYK라 어떤 색조 — 특히 네온 그린, 일렉트릭 블루 — 는 같은 채도로 못 찍음. CMYK 색역(gamut)이 RGB보다 좁음.
#abc와 #aabbcc는 같은가요?
같습니다. 3자리 HEX는 단축형: 각 자리를 두 번 반복. #abc = #aabbcc. 단축형은 각 채널 두 자리가 동일한 색만 표현 가능.
디자인 시스템에 HSL과 OKLCH 중 어느 게 좋을까요?
둘 다 작동. HSL은 브라우저 지원이 더 넓음(보편적). OKLCH는 2023년부터 모든 모던 브라우저 지원 + 시각적으로 일관된 팔레트 — OKLCH의 같은 명도가 실제로 같게 보임. HSL은 그렇지 않음.
왜 같은 HEX인데 브라우저마다 색이 살짝 달라 보이나요?
색 관리 — 각 기기마다 색 프로파일·주변 조명·gamut가 다름. HEX 값은 어디서든 동일하지만 디스플레이가 약간 다르게 해석. 일반 웹 작업에선 정상이고 피할 수 없음.
여기서 변환한 색이 저장되나요?
저장되지 않습니다. 변환은 모두 사용자 브라우저 안에서만 이뤄집니다.