색상 코드 변환 HEX RGB HSL CMYK 차이와 변환하는 법

디자이너가 보내준 색상이 #3B82F6인데, CSS에서는 RGB로 넣어야 하고, 인쇄소에서는 CMYK 값을 달라고 한다. 같은 파란색인데 표기법이 다를 뿐이다.

색상 코드 4가지 형식

HEX

#으로 시작하는 6자리 코드. 웹 디자인에서 가장 많이 쓴다. 예: #FF5733

RGB

빨강(R), 초록(G), 파랑(B) 세 가지 값을 0~255로 표현한다. CSS에서 rgb(255, 87, 51) 형태로 사용한다.

HSL

색상(Hue), 채도(Saturation), 명도(Lightness)로 표현한다. 색상 조정이 직관적이라 디자인 작업에서 선호된다.

CMYK

시안(C), 마젠타(M), 노랑(Y), 검정(K)의 잉크 비율이다. 인쇄물 작업에서 쓰인다.

어디서 어떤 형식을 쓸까

주의 RGB(화면)와 CMYK(인쇄)는 색 재현 범위가 다르다. 모니터에서 본 색이 인쇄하면 달라 보이는 건 이 때문이다. 인쇄물은 반드시 CMYK로 변환한 뒤 교정쇄로 확인하는 게 안전하다.

보색과 유사색, 배색에 활용하기

색상 하나를 정했을 때 어울리는 조합을 찾는 것도 디자인에서 중요한 부분이다.

• 보색: 색상환에서 정반대에 위치한 색. 강한 대비 효과를 줄 때 쓴다. 파랑의 보색은 주황이다.
• 유사색: 색상환에서 인접한 색. 부드럽고 조화로운 느낌을 줄 때 적합하다.
• 단계별 팔레트: 같은 색의 밝기만 10단계로 나누면 UI 디자인에서 버튼, 배경, 텍스트 색을 통일감 있게 쓸 수 있다.

색상 코드 변환하는 법

HEX를 RGB로 바꾸는 공식을 외울 필요는 없다. 온라인 색상 변환기에 아무 형식의 코드를 넣으면 HEX, RGB, HSL, CMYK가 동시에 표시된다. 컬러 피커로 색을 직접 골라도 되고, 보색이나 유사색까지 자동으로 생성해주니 배색 고민을 줄일 수 있다.

같은 색이 형식만 다른 건데, 변환이 귀찮아서 대충 비슷한 색을 쓰면 결과물 퀄리티가 떨어진다. 정확한 코드 하나가 디자인 완성도를 좌우한다.