HEX, RGB, CMYK 색상 코드 변환하는 법 (차이점 정리)

웹 디자이너가 보내준 색상이 #3B82F6인데, 인쇄소에서는 CMYK 값을 달라고 한다. 파워포인트에서 쓰려면 RGB가 필요하고, CSS에서는 HEX를 쓴다. 같은 파란색인데 표현 방식이 네 가지나 된다.

색상 코드 형식별 차이

왜 형식이 이렇게 많은가

화면(RGB)과 인쇄(CMYK)의 원리가 다르다

모니터는 빛을 섞어서 색을 만든다(가산혼합). 빨강+초록+파랑을 최대로 섞으면 흰색이 된다. 반면 인쇄는 잉크를 섞는 방식이라(감산혼합) 모든 색을 섞으면 검정에 가까워진다.

이 차이 때문에 모니터에서 예쁘게 보이던 색이 인쇄물에서는 탁하게 나오는 일이 생긴다. 특히 형광색에 가까운 밝은 색은 CMYK로 정확히 재현하기 어렵다.

HEX는 RGB의 축약 표현이다

#3B82F6을 풀어보면 이렇다.

• 3B = 빨강 59 (16진수 → 10진수)
• 82 = 초록 130
• F6 = 파랑 246

결국 HEX와 RGB는 같은 정보를 담고 있고, 표기 방식만 다르다. CSS에서는 HEX가 짧아서 주로 쓰이고, 디자인 프로그램에서는 RGB 슬라이더가 직관적이라 RGB를 쓴다.

HSL은 색 조절에 편하다

RGB로 "이 파란색을 좀 더 밝게"를 하려면 세 값을 모두 건드려야 한다. HSL에서는 L(밝기) 값 하나만 올리면 된다. 디자인 시스템에서 같은 색의 밝기 변형을 만들 때 HSL이 유리한 이유다.

변환이 필요한 실제 상황

• 웹 → 인쇄: 웹사이트 브랜드 색상(HEX)을 명함, 전단지에 쓸 때 CMYK 변환 필요
• 디자인 → 개발: 피그마에서 받은 RGB 값을 CSS HEX로 변환
• PPT → 웹: 파워포인트 RGB 색상을 웹 페이지에 적용할 때
• 보색 찾기: 메인 색상의 보색을 구해서 강조 색상으로 쓸 때

색상 코드 변환 방법

수식으로 직접 변환할 수도 있지만 현실적으로 그럴 일은 없다. 온라인 색상 변환기에서 HEX, RGB, HSL, CMYK 중 아무 형식이나 입력하면 나머지 세 형식으로 자동 변환된다. 컬러 피커로 원하는 색을 직접 찍어서 코드를 뽑을 수도 있고, 보색이나 유사색도 함께 생성되니까 배색 작업할 때 편하다.

TIP 인쇄용 CMYK 값은 모니터에서 정확히 재현되지 않는다. 중요한 인쇄물이라면 실제 인쇄 샘플로 색상을 확인하는 게 안전하다.

색상 코드가 달라도 결국 같은 색을 가리킨다. 용도에 맞는 형식으로 변환하는 과정이 번거로울 뿐이고, 그 번거로움은 도구 하나로 해결된다.