디자이너가 보내준 브랜드 컬러가 #3B82F6이다. CSS에서는 이대로 쓰면 되는데, 인쇄소에 넘길 때는 CMYK 값이 필요하다고 한다. 같은 파란색인데 표기법이 왜 이렇게 많은 걸까.
4가지 색상 코드 형식
| 형식 | 표기 예시 | 주 사용처 | 특징 |
|---|---|---|---|
| HEX | #3B82F6 | 웹, CSS | 6자리 16진수, 가장 널리 쓰임 |
| RGB | rgb(59, 130, 246) | 웹, 화면 디자인 | 빨강/초록/파랑 0~255 조합 |
| HSL | hsl(217, 91%, 60%) | CSS, 디자인 시스템 | 색상/채도/명도 직관적 조절 |
| CMYK | cmyk(76, 47, 0, 4) | 인쇄, 출판 | 잉크 기반, 화면 색과 차이 있음 |
HEX와 RGB는 같은 색이다
HEX와 RGB는 표기법만 다를 뿐 같은 색을 가리킨다. #3B82F6을 풀어보면:
3B→ 빨강 59 (16진수 3B = 10진수 59)82→ 초록 130F6→ 파랑 246
둘 다 모니터의 빛(빨강+초록+파랑)을 섞어서 색을 표현하는 방식이다. CSS에서는 HEX가 짧아서 더 많이 쓰이고, 자바스크립트에서 색을 계산할 때는 RGB가 편하다.
HSL은 왜 따로 있을까
RGB가 기계 친화적이라면, HSL은 사람 친화적이다.
- H (Hue, 색상)
- 0~360도 색상환에서의 위치. 0은 빨강, 120은 초록, 240은 파랑.
- S (Saturation, 채도)
- 0%면 회색, 100%면 가장 선명한 색.
- L (Lightness, 명도)
- 0%면 검정, 50%면 원래 색, 100%면 흰색.
"이 파란색을 좀 더 연하게 만들고 싶다"면 HSL에서 L 값만 올리면 된다. RGB에서는 세 값을 동시에 바꿔야 해서 감을 잡기 어렵다. 디자인 시스템에서 밝기 단계별 팔레트를 만들 때 HSL이 유리한 이유다.
CMYK, 인쇄할 때는 반드시 확인
모니터는 빛을 섞고(RGB), 프린터는 잉크를 섞는다(CMYK). 원리가 다르기 때문에 화면에서 본 색과 인쇄물의 색이 다를 수 있다. 특히 형광 계열, 채도 높은 파란색/초록색은 인쇄하면 탁해지는 경우가 많다.
주의 RGB에서 CMYK로 변환하면 색 영역(gamut)이 좁아진다. 화면에서 선명하게 보이던 색이 인쇄에서는 재현이 안 될 수 있으니, 중요한 인쇄물은 반드시 교정쇄(proof)를 확인해야 한다.
변환이 필요한 실제 상황
코드 값을 외우고 다닐 수는 없으니, 필요할 때마다 변환하는 게 현실적이다. 색상 코드 변환기에 아무 형식으로든 색상 값을 넣으면 HEX, RGB, HSL, CMYK 네 가지를 동시에 보여준다. 컬러 피커로 직접 색을 고를 수도 있고, 보색이나 유사색 조합도 자동으로 생성된다.
색상 코드는 결국 같은 색을 다른 언어로 표현한 것이다. 쓰는 곳에 맞는 형식만 골라 쓰면 되고, 변환은 도구에 맡기면 된다.