색상 코드 변환 방법 (HEX, RGB, HSL, CMYK 한번에)

디자이너가 보내준 색상이 #3B82F6이다. 웹에서는 이대로 쓰면 되지만, PPT에 넣으려면 RGB 값이 필요하고, 인쇄소에 보내려면 CMYK로 바꿔야 한다. 같은 파란색인데 표현 방식이 다른 것뿐이라, 변환만 하면 된다.

색상 코드 4가지 형식

HEX와 RGB는 화면(모니터, 스마트폰) 기준이고, CMYK는 인쇄물 기준이다. 웹 작업은 HEX나 RGB, 명함이나 브로슈어를 인쇄소에 보낼 때는 CMYK를 쓴다.

변환이 자주 필요한 상황

피그마/스케치에서 PPT로 색상 옮길 때

디자인 툴은 HEX를 기본으로 쓰지만, 파워포인트는 RGB 값을 요구한다. #3B82F6을 RGB(59, 130, 246)으로 바꿔서 사용자 지정 색상에 입력하면 된다.

CSS 작업 중 색상 미세 조절할 때

HSL 형식이 편하다. 밝기(L)만 올리면 같은 계열의 밝은 색을 얻을 수 있고, 채도(S)를 낮추면 탁한 느낌으로 바뀐다. HEX에서는 이런 조절이 직관적이지 않다.

인쇄소에 파일 넘길 때

모니터에서 보이는 RGB 색상과 인쇄물의 CMYK 색상은 차이가 있다. 특히 형광색에 가까운 밝은 색은 인쇄로 재현이 안 되는 경우가 있으니, 미리 CMYK 값을 확인해야 한다.

온라인 색상 변환기를 쓰면 HEX 값 하나만 입력해도 RGB, HSL, CMYK 네 가지 형식이 동시에 나온다. 슬라이더로 색상을 미세 조절할 수도 있고, 각 코드 옆 복사 버튼을 눌러 바로 가져다 쓸 수 있다.

보색과 유사색 활용법

색상 하나를 정했을 때, 어울리는 조합을 찾는 건 또 다른 문제다. 색상 이론에서는 두 가지 기본 조합을 많이 쓴다.

• 보색: 색상환에서 정반대에 위치한 색이다. 파란색(#3B82F6)의 보색은 주황 계열. 강한 대비를 줘서 시선을 끌 때 쓴다. CTA 버튼, 배너 디자인에 적합하다.
• 유사색: 색상환에서 바로 옆에 있는 색이다. 파란색 옆의 남색이나 하늘색. 조화롭고 안정적인 느낌을 줄 때 쓴다. 배경, 카드 디자인에 무난하다.

TIP 메인 컬러를 정한 뒤 보색은 강조용으로, 유사색은 보조 배경으로 배치하면 별도 컬러 팔레트 도구 없이도 균형 잡힌 배색이 가능하다.

색상 코드 형식이 다르다고 어려운 건 아니다. 변환 도구에 한 가지 값만 넣으면 나머지가 자동으로 나오니까, 외울 필요 없이 필요할 때 바꿔 쓰면 된다.