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

디자이너가 보내준 시안에 #3B82F6이라고 적혀 있다. 웹 개발에는 바로 쓸 수 있는데, 인쇄 업체에서는 CMYK 값을 달라고 한다. 같은 파란색인데 형식만 다른 거라 변환만 하면 되는 일이다.

색상 코드 4가지 형식

HEX (#3B82F6)

16진수 6자리로 표현한다. 웹에서 가장 많이 쓰이는 형식이다. CSS, HTML에서 바로 사용 가능하다.

RGB (59, 130, 246)

빨강, 초록, 파랑 각각 0~255 범위로 표현한다. 모니터와 화면 출력 기준이다. CSS에서 rgb(59, 130, 246) 형태로 쓴다.

HSL (217°, 91%, 60%)

색상(Hue), 채도(Saturation), 밝기(Lightness)로 구분한다. 색조는 그대로 두고 밝기나 채도만 바꿀 때 직관적이다.

CMYK (76%, 47%, 0%, 4%)

인쇄 전용 형식이다. 청록, 자홍, 노랑, 검정 잉크 비율로 색을 표현한다. 화면과 인쇄물의 색감이 다른 이유가 RGB와 CMYK의 차이 때문이다.

어떤 형식을 어디서 쓰나

작업 흐름은 간단하다. 색상 코드 변환기를 열고 HEX 코드를 입력하면 나머지 세 형식(RGB, HSL, CMYK)이 자동으로 채워진다. 컬러 피커로 색상을 직접 고를 수도 있고, 슬라이더로 미세 조정도 된다.

보색과 유사색 활용

메인 색상을 정했는데 어울리는 보조 색상을 찾기 어려울 때가 있다. 색상환 기반으로 자동 추천되는 조합을 참고하면 된다.

• 보색 — 색상환에서 정반대(180도)에 위치한 색. 대비가 강해서 버튼이나 CTA에 쓰면 눈에 띈다.
• 유사색 — 색상환에서 인접한 색. 자연스러운 조화를 만들어 배경이나 그라데이션에 적합하다.
• 삼각 배색 — 색상환에서 120도 간격으로 떨어진 3색 조합. 다채로우면서도 균형 잡힌 느낌을 준다.

TIP 화면에서 보는 색과 인쇄물 색이 다를 수 있다. 모니터는 RGB(빛), 인쇄는 CMYK(잉크) 기반이라 완전히 같은 색 재현이 불가능하다. 중요한 인쇄물은 반드시 시안 출력본으로 확인하자.

색상 코드 변환은 디자인 작업에서 반복적으로 필요한 일이다. 형식 간 변환 공식을 외울 필요 없이 코드 하나만 넣으면 나머지가 채워지니까.