HEX RGB 색상 코드 변환, 웹·인쇄 색상 맞추는 법

디자이너가 보내준 색상이 #3B82F6이다. CSS에 넣으려면 HEX 형식 그대로 쓰면 되지만, 포토샵에서는 RGB가 필요하고, 인쇄소에 넘기려면 CMYK 값을 따로 뽑아야 한다. 하나의 색상인데 형식이 네 가지다.

HEX, RGB, HSL, CMYK 차이

HEX

#FF5733 같은 16진수 형식. 웹 개발에서 가장 많이 쓴다. CSS에 바로 넣을 수 있어서 프론트엔드 작업에 편하다.

RGB

빨강(R), 초록(G), 파랑(B) 각 0~255 값으로 색을 표현한다. 포토샵, 피그마 등 대부분의 디자인 툴이 이 형식을 기본으로 쓴다.

HSL

색상(Hue), 채도(Saturation), 밝기(Lightness)로 구분한다. 같은 색 계열에서 밝기나 채도만 조절할 때 직관적이다.

CMYK

청록(C), 자홍(M), 노랑(Y), 검정(K)의 잉크 배합 비율이다. 인쇄물 작업에서만 쓰고, 화면용과 색감이 다를 수 있다.

색상 코드 변환하는 법

색상 코드 변환기에 HEX 값을 하나 입력하면 RGB, HSL, CMYK로 동시에 변환된 결과가 나온다. 반대로 RGB 값을 넣어도 나머지 형식이 자동으로 채워진다.

1. 컬러 피커로 원하는 색을 선택하거나 코드를 직접 입력한다.
2. 4가지 형식의 변환 결과가 한 화면에 표시된다.
3. 필요한 형식 옆의 복사 버튼을 눌러 바로 사용한다.

보색과 유사색, 왜 알아야 할까

메인 컬러 하나만 정해두면 나머지 색을 뽑기가 애매하다. 보색은 메인 컬러와 대비가 강한 색이라 CTA 버튼이나 강조 요소에 쓰기 좋고, 유사색은 톤이 비슷해서 배경이나 보조 색상에 적합하다.

TIP 브랜드 컬러 하나를 입력하면 보색, 유사색, 삼각형 조화색까지 자동으로 뽑아준다. 팔레트를 직접 만드는 것보다 기계적으로 뽑는 게 조화로운 결과가 나올 때가 많다.

웹에서 쓰던 색을 인쇄물에 그대로 적용하면 톤이 달라지는 경우가 잦다. 작업 전에 CMYK 값을 미리 확인해두면 인쇄 후 "색이 다르다"는 문제를 줄일 수 있다.