색상 코드 변환, HEX RGB CMYK 차이와 변환 방법

피그마에서 뽑은 색상 코드는 #3A7BDE인데, CSS에서는 rgb(58, 123, 222)로 써야 한다. 같은 파란색인데 표기 방식만 다르다. 인쇄소에 보내려면 또 CMYK로 바꿔야 해서, 하나의 색을 여러 포맷으로 변환할 일이 생각보다 잦다.

색상 코드 4가지 포맷

HEX

16진수 6자리로 표현한다. #FF0000은 빨간색. 웹과 앱 디자인에서 가장 많이 쓰인다.

RGB

빨강(R), 초록(G), 파랑(B) 각각 0~255 값으로 표현한다. CSS에서 rgb(255, 0, 0)처럼 사용한다.

HSL

색상(Hue), 채도(Saturation), 밝기(Lightness)로 표현한다. 색의 톤을 조절할 때 직관적이다.

CMYK

청록(C), 자홍(M), 노랑(Y), 검정(K)의 조합. 인쇄물용 색상 모델이다.

어디서 어떤 포맷을 쓰나

웹 작업만 한다면 HEX와 RGB만 알면 충분하다. 인쇄물까지 다루는 경우에는 CMYK 변환이 필수인데, 모니터 색과 인쇄 색은 근본적으로 다르기 때문에 정확한 변환이 중요하다.

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

색 하나를 정했으면, 거기에 어울리는 색을 찾아야 한다. 기본적인 색상 조화 원리를 알면 배색이 훨씬 수월해진다.

• 보색: 색상환에서 정반대(180도)에 있는 색. 대비가 강해서 강조할 때 쓴다.
• 유사색: 색상환에서 30도 이내에 있는 인접 색. 통일감 있는 디자인에 적합하다.
• 삼각 조화: 120도 간격의 세 가지 색. 균형 잡힌 배색에 유용하다.

온라인 색상 변환기에 HEX 코드를 넣으면 RGB, HSL, CMYK가 즉시 나오고, 보색과 유사색까지 자동으로 생성해준다. 명도별 10단계 팔레트도 나오니까 디자인 시안 작업할 때 유용하다.

TIP 브랜드 컬러를 정할 때는 메인 색상 하나를 고른 뒤, 유사색 2개와 보색 1개를 조합하면 안정적인 배색이 만들어진다. 직접 색상환을 돌려가며 고르는 것보다 자동 생성이 훨씬 빠르다.

색상 코드 변환은 수작업으로 하면 계산이 번거롭고 오차도 생긴다. 도구 하나 북마크해두면 포맷 변환부터 배색까지 한꺼번에 해결된다.