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

디자이너가 보내준 색상 코드가 #8B5CF6이다. 웹 CSS에 넣으려면 HEX나 RGB가 필요하고, 인쇄소에 넘기려면 CMYK로 바꿔야 한다. 같은 보라색인데 표기법이 네 가지다. 어디서 어떤 코드를 쓰는지 정리해봤다.

색상 코드 형식 비교

각 형식이 존재하는 이유

HEX는 HTML 초창기부터 쓰인 16진수 표기다. 6자리로 간결해서 디자이너와 개발자 간 소통에 많이 쓴다. RGB는 빛의 3원색(빨강, 초록, 파랑)을 0~255 값으로 표현한다. 모니터, 스마트폰 등 화면 기반 매체는 전부 RGB 방식이다.

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 나눈다. 같은 계열에서 밝기만 바꾸거나 채도만 조절할 때 직관적이라 CSS에서 선호하는 개발자가 많다. CMYK는 잉크 혼합 비율이다. 화면에서 보이는 색과 인쇄물의 색이 다른 이유가 바로 RGB와 CMYK의 색 공간 차이 때문이다.

보색과 유사색 활용

메인 컬러 하나를 정하면 그 색과 어울리는 조합을 찾아야 한다.

• 보색: 색상환에서 정반대(180도)에 위치한 색. 강한 대비 효과가 나서 버튼, CTA 등 눈에 띄어야 하는 요소에 쓴다.
• 유사색: 색상환에서 30도 옆에 있는 색. 자연스럽고 부드러운 배색이 필요할 때 쓴다.
• 팔레트: 하나의 색을 기준으로 밝기를 단계별로 나눈 것. 카드 배경, 보더, 텍스트 색 등을 통일감 있게 잡을 때 유용하다.

색상 코드를 일일이 계산할 필요 없이 컬러 코드 변환기에 HEX값 하나만 넣으면 RGB, HSL, CMYK가 동시에 나온다. 보색과 유사색도 자동 생성되니까, 배색 조합을 잡을 때 참고하기 좋다.

화면용과 인쇄용 색상 코드가 다르다는 걸 모르고 그대로 넘기면, 인쇄물 색이 모니터에서 본 것과 다르게 나올 수 있다. 용도에 맞는 코드를 쓰는 게 기본이다.