피그마에서 고른 색상의 HEX 코드는 있는데, 인쇄소에서 CMYK 값을 달라고 한다. 색상 코드 변환이 필요한 순간이다. 웹 색상과 인쇄 색상은 체계 자체가 다르기 때문에, 같은 색이라도 코드가 완전히 달라진다.
색상 코드 형식이 왜 이렇게 많을까
- HEX (#FF5733)
- 웹에서 가장 많이 쓰는 형식. 16진수 6자리로 색을 표현한다. CSS, HTML에서 기본으로 사용.
- RGB (255, 87, 51)
- 빨강(R), 초록(G), 파랑(B) 세 가지 빛의 강도(0~255)로 색을 지정한다. 모니터, 디스플레이용.
- HSL (14°, 100%, 60%)
- 색상(Hue), 채도(Saturation), 밝기(Lightness)로 표현한다. 색을 직관적으로 조절할 때 편리.
- CMYK (0%, 66%, 80%, 0%)
- 시안(C), 마젠타(M), 옐로(Y), 블랙(K) 잉크 비율. 인쇄물 전용이다.
HEX와 RGB는 빛을 기반으로 한 색상이고, CMYK는 잉크를 기반으로 한 색상이다. 화면에서 보는 색과 종이에 찍히는 색이 다른 건 이 때문이다.
실무에서 변환이 필요한 경우
| 상황 | 필요한 변환 |
|---|---|
| 디자인 시안 → 웹 퍼블리싱 | HEX 또는 RGB |
| 웹 색상 → 명함/전단지 인쇄 | CMYK |
| CSS에서 밝기/채도 조절 | HSL |
| 브랜드 컬러 가이드 작성 | HEX + RGB + CMYK 모두 |
주의 RGB에서 CMYK로 변환하면 색이 탁해지는 경우가 있다. 화면에서 선명하던 형광 계열 색은 인쇄에서 재현이 어렵다. 인쇄물 제작 시 반드시 실물 색감을 확인해야 한다.
보색·유사색까지 한번에 확인하는 법
색 하나를 정하면 어울리는 조합이 필요해진다. 색상 코드 변환기에 HEX나 RGB 값을 넣으면 네 가지 형식으로 자동 변환되고, 보색과 유사색 5개도 함께 나온다. 밝기별 10단계 팔레트까지 생성해주기 때문에, 버튼 hover 색이나 배경 그라데이션 톤을 잡을 때 그대로 가져다 쓸 수 있다.
색상 코드를 하나하나 계산기로 변환할 필요 없이, 한 곳에서 입력하면 나머지가 전부 나온다. 디자인 작업이 아니더라도, PPT 색 맞출 때 한 번씩 쓸 일이 생긴다.