HEX, RGB, CMYK 색상 코드 변환하는 법

디자이너가 보내준 시안에 "#3B82F6"이라고 적혀 있다. CSS에는 이대로 쓰면 되지만, PPT에서 같은 색을 넣으려면 RGB 값이 필요하다. 인쇄소에 넘길 때는 CMYK를 달라고 한다. 같은 색인데 표현 형식이 다른 것뿐이다.

순서: 색상 코드 형식별 차이 → 변환이 필요한 상황 → 변환 방법 → 보색과 팔레트

색상 코드 형식, 뭐가 다른가

HEX와 RGB는 같은 색을 다르게 표기한 것일 뿐이라 변환해도 색이 달라지지 않는다. 반면 CMYK는 색 표현 원리 자체가 다르기 때문에(빛의 가산혼합 vs 잉크의 감산혼합) 모니터 색과 인쇄 색이 완전히 일치하지는 않는다.

변환이 필요한 실무 상황

• 웹 → PPT — 웹 디자인의 HEX 코드를 파워포인트 사용자 정의 색상(RGB)에 입력
• 디자인 시안 → 개발 — 피그마에서 뽑은 HSL을 CSS HEX로 변환
• 화면 → 인쇄 — 로고 RGB 색을 명함/전단지 인쇄용 CMYK로 변환
• 브랜드 가이드 작성 — 하나의 색을 HEX, RGB, CMYK 모두 명시

색상 코드 변환하기

색상 코드 변환기를 쓰면 HEX 값 하나만 입력해도 RGB, HSL, CMYK가 동시에 나온다. 반대로 RGB 슬라이더를 움직이면 나머지 형식이 실시간으로 업데이트된다.

컬러 피커로 화면에서 원하는 색을 직접 찍어도 되고, 코드를 수동으로 입력해도 된다. 변환된 코드는 클릭 한 번으로 복사할 수 있어서 바로 붙여넣기가 가능하다.

주의 RGB → CMYK 변환 시 모니터에서 보이는 색과 실제 인쇄 결과가 다를 수 있다. 중요한 인쇄물이라면 인쇄소에 테스트 출력(교정쇄)을 요청하는 게 안전하다.

보색과 팔레트 활용

색 하나를 골랐는데 어울리는 조합을 찾기가 막막할 때가 있다. 색상 이론에서 자주 쓰는 조합 방식이 있다.

보색 (Complementary)

색상환에서 180도 반대편에 있는 색이다. 파란색의 보색은 주황색. 대비가 강해서 강조할 때 쓴다.

유사색 (Analogous)

색상환에서 30도 이내의 인접한 색이다. 자연스러운 조화를 만들 때 적합하다.

삼각 조화 (Triadic)

색상환에서 120도 간격의 세 색이다. 균형 잡힌 배색이지만 채도 조절을 잘해야 난잡해지지 않는다.

색상 변환기에서 색을 하나 선택하면 보색, 유사색, 삼각 조화색이 자동으로 생성된다. 밝기를 10단계로 나눈 팔레트도 같이 나오니까 버튼 색, 배경색, 텍스트 색을 세트로 잡을 때 참고하면 된다.

색상 코드는 결국 같은 색을 다른 언어로 표현한 것이다. 형식 간 변환 원리를 알면 도움이 되지만, 매번 계산할 필요는 없다.