디자이너가 전달해준 색상 코드가 #3B82F6인데, CSS에는 rgb 값으로 넣어야 한다. 인쇄소에서는 CMYK 값을 달라고 한다. 같은 색인데 표기 방식이 전부 다르니 매번 변환해야 하는 상황이 생긴다.
색상 코드 형식 4가지, 뭐가 다른가
| 형식 | 표기 예시 | 주로 쓰이는 곳 | 특징 |
|---|---|---|---|
| HEX | #3B82F6 | 웹(HTML, CSS) | 16진수 6자리, 가장 짧은 표기 |
| RGB | rgb(59, 130, 246) | CSS, 디자인 툴 | 빨강/초록/파랑 0~255 |
| HSL | hsl(217, 91%, 60%) | CSS, 색상 조절 | 색조/채도/명도, 직관적 조절 |
| CMYK | 76, 47, 0, 4 | 인쇄물 | 잉크 배합 비율 |
웹에서는 HEX와 RGB를 가장 많이 쓴다. 색상의 밝기나 톤을 미세하게 조절할 때는 HSL이 편하고, 명함이나 포스터 같은 인쇄물을 맡길 때는 CMYK가 필요하다.
HEX 코드는 어떻게 읽는 걸까
#3B82F6를 분해하면 이렇다.
- 3B = 빨강(Red) 59
- 82 = 초록(Green) 130
- F6 = 파랑(Blue) 246
16진수 두 자리씩 끊어서 RGB 값으로 바꾸면 된다. 하지만 직접 계산하는 건 번거롭다. 색상 변환기에 HEX 코드를 입력하면 RGB, HSL, CMYK 값이 동시에 나오고, 반대로 RGB에서 HEX로 바꾸는 것도 된다. 컬러 피커로 색을 직접 찍어서 코드를 뽑을 수도 있다.
보색과 유사색, 어떻게 찾나
배너나 프레젠테이션을 만들 때 색 조합을 고르는 게 제일 어렵다. 색상환에서 관계를 기반으로 고르면 실패 확률이 줄어든다.
- 보색 (Complementary)
- 색상환에서 정반대(180도)에 위치한 색. 강한 대비로 눈에 확 띈다. 예: 파랑 ↔ 주황
- 유사색 (Analogous)
- 색상환에서 30도 안쪽에 있는 색. 자연스럽고 편안한 조합이다. 예: 파랑 - 남색 - 보라
- 삼각 조화 (Triadic)
- 120도 간격으로 세 색을 뽑는다. 생동감 있으면서도 균형 잡힌 조합이다.
TIP 메인 색상 하나를 정한 뒤 보색이나 유사색을 보조 색으로 쓰면 배색이 안정적이다. 세 가지 이상의 색을 쓸 때는 비율을 60:30:10 정도로 맞추면 어지럽지 않다.
웹 vs 인쇄, 색상이 다르게 보이는 이유
모니터에서 본 색과 인쇄물 색이 다른 건 당연하다. 모니터는 빛을 섞는 가산혼합(RGB)이고, 인쇄는 잉크를 겹치는 감산혼합(CMYK)이기 때문이다. 특히 형광색 계열이나 매우 채도 높은 색은 CMYK로 재현이 안 되는 영역(gamut)에 해당해서, 인쇄하면 탁하게 나올 수 있다.
색상 코드 하나 때문에 작업을 두 번 할 필요는 없다. 형식 간 변환을 해두면 웹이든 인쇄물이든 같은 색을 정확하게 지정할 수 있다.