Figma에서 뽑은 색상 코드가 #3B82F6인데, 개발자에게 넘기니까 RGB 값으로 달라고 했다. 디자인 툴은 HEX를 쓰고, CSS에서는 RGB를 쓰기도 하고, 인쇄소에서는 CMYK를 요구한다. 같은 색인데 코드 체계가 다른 셈이다.
네 가지 색상 코드, 뭐가 다른가
- HEX (16진수)
#FF5733형식. 웹 디자인에서 가장 많이 쓴다. 빨강, 초록, 파랑 각각을 00~FF(0~255)로 표현한 6자리 코드다.- RGB
rgb(255, 87, 51)형식. 빨강, 초록, 파랑의 밝기를 0~255 숫자로 표현한다. CSS, 디스플레이 기반 작업에서 사용한다.- HSL
hsl(14, 100%, 60%)형식. 색상(Hue), 채도(Saturation), 밝기(Lightness)로 표현한다. 색상을 직관적으로 조절하고 싶을 때 편하다.- CMYK
- 인쇄 전용 코드. 시안, 마젠타, 옐로, 블랙 네 가지 잉크 비율로 색상을 표현한다. 모니터 색상과 인쇄 결과물이 다를 수 있는 이유가 RGB와 CMYK의 색 영역 차이 때문이다.
어떤 상황에서 어떤 코드를 쓸까
| 상황 | 권장 코드 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 표준 |
| 디자인 시안 | HEX | Figma, Sketch 기본값 |
| 인쇄물 (명함, 포스터) | CMYK | 인쇄기 색상 체계 |
| 색상 미세 조정 | HSL | 밝기/채도만 바꾸기 쉬움 |
보색과 유사색 찾는 법
메인 컬러를 정했으면 그에 어울리는 보조 색상이 필요하다. 보색은 색상환에서 정반대(180도)에 위치한 색이고, 유사색은 양옆(30도)에 있는 색이다.
보색 조합은 대비가 강해서 버튼이나 강조 요소에 효과적이고, 유사색 조합은 자연스러운 그라데이션이나 배경에 적합하다. 직접 색상환을 돌려보면서 찾을 수도 있지만, 디자인 작업 중 코드 변환이 필요할 때마다 색상 변환기를 띄워두면 편하다. HEX를 입력하면 RGB, HSL, CMYK가 동시에 나오고, 보색이나 유사색 추천까지 해준다.
TIP 웹용 색상을 인쇄용으로 바꿀 때는 CMYK 변환 결과를 반드시 확인해야 한다. 모니터에서 선명하던 네온 색상이 인쇄에서는 탁하게 나오는 경우가 많다.
색상 코드 체계가 여러 개인 이유는 용도가 다르기 때문이다. 웹이면 HEX, 인쇄면 CMYK. 이 구분만 알아두면 작업 중간에 코드가 안 맞아서 헤매는 일은 줄어든다.