HEX RGB 변환, 색상 코드 형식별 차이와 변환법

디자이너에게 받은 시안에는 HEX 코드가 적혀 있는데, CSS에서 투명도를 넣으려면 RGB 값이 필요하다. 인쇄물을 만들려면 같은 색상의 CMYK 값을 알아야 한다. 색상 하나인데 쓰이는 형식이 네 가지다.

색상 코드 4가지 형식

각 형식이 쓰이는 맥락이 다르다. 디자인과 개발 작업을 하려면 네 가지 모두 알아둘 필요가 있다.

HEX

#FF5733처럼 # 뒤에 6자리 16진수로 표현한다. 웹 디자인에서 가장 많이 쓰이는 형식이다. CSS, HTML에서 바로 사용할 수 있다.

RGB

빨강(R), 초록(G), 파랑(B) 세 값을 0~255 범위로 지정한다. rgb(255, 87, 51) 형태로 쓰며, CSS에서 투명도(alpha)를 추가할 수 있어 rgba() 형태도 자주 쓰인다.

HSL

색상(Hue), 채도(Saturation), 명도(Lightness)로 구성된다. hsl(14, 100%, 60%) 형태로 쓰며, 사람이 직관적으로 색을 조절하기 가장 편한 방식이다. 채도만 낮추면 회색 계열이 되고, 명도만 올리면 밝아진다.

CMYK

시안(C), 마젠타(M), 노랑(Y), 검정(K)의 잉크 혼합 비율이다. 인쇄물 전용 형식으로, 웹에서는 쓰이지 않는다. 명함, 포스터, 패키지 디자인에 필수다.

같은 색상, 다른 코드

주황빛 빨강 하나를 예로 들면, 형식에 따라 표기가 이렇게 달라진다.

이 네 값은 모두 같은 색상을 가리킨다. 작업 환경에 맞는 형식을 골라 쓰면 되는데, 수동으로 변환하는 건 계산이 복잡하다.

변환과 조화 색상 한 번에 처리하기

컬러 피커에서 색상을 고르거나 HEX 코드를 하나 입력하면 나머지 세 형식이 자동으로 나오는 온라인 색상 변환기가 실무에서 쓸 만하다. 복사 버튼을 누르면 해당 형식의 코드가 클립보드에 바로 들어간다.

변환뿐 아니라 보색, 유사색, 삼각 조화 색상까지 자동 생성해준다. 배색 조합을 고민할 때 색상환을 직접 돌리지 않아도 된다. 밝기별 10단계 팔레트도 한 화면에 나오니 버튼 호버 색상이나 그라데이션용 색을 뽑을 때 편하다.

TIP 웹에서 쓰던 색상을 그대로 인쇄하면 톤이 달라질 수 있다. RGB는 빛의 혼합(모니터), CMYK는 잉크의 혼합(인쇄)이라 색 재현 방식이 다르기 때문이다. 인쇄물은 반드시 CMYK 값을 기준으로 작업해야 한다.

자주 묻는 질문

색상 코드 변환은 외우는 게 아니라 도구에 맡기는 영역이다. 코드 하나 입력하면 네 형식이 동시에 나오니 일일이 계산할 필요가 없다.