디자이너가 보내준 시안에 "#3B82F6"이라고 적혀 있다. 개발자에게는 이 HEX 코드면 충분하지만, 인쇄소에서는 CMYK 값을 달라고 한다. 같은 파란색인데 형식만 다른 건데, 변환 공식을 외우고 있는 사람은 드물다.
색상 코드 4가지 형식
- HEX (16진수)
- #RRGGBB 형태. 웹에서 가장 널리 쓰인다. 빨강·초록·파랑을 각각 00~FF로 표현한다. #000000은 검정, #FFFFFF은 흰색.
- RGB
- Red, Green, Blue 각 0~255 값. CSS에서
rgb(59, 130, 246)형태로 쓴다. 모니터나 화면 출력 기반의 색상 체계다. - HSL
- Hue(색상 0~360°), Saturation(채도 0~100%), Lightness(밝기 0~100%). 색의 톤을 조절할 때 직관적이라 디자이너가 선호한다.
- CMYK
- Cyan, Magenta, Yellow, Key(Black). 인쇄 전용 색상 모델이다. 잉크 혼합 비율을 나타내며, 모니터 색상과 인쇄 결과가 다를 수 있다.
어디에 어떤 형식을 쓸까
| 용도 | 권장 형식 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 표준, 가장 호환성 높음 |
| UI/UX 디자인 | HEX | 피그마, 스케치 등 디자인 툴 기본값 |
| 색상 톤 조정 | HSL | 밝기·채도를 직관적으로 조절 가능 |
| 인쇄물 제작 | CMYK | 인쇄소 납품 시 필수 |
| 프레젠테이션 | RGB | 파워포인트, 구글 슬라이드 기본값 |
HEX와 RGB는 어떻게 대응되나
HEX는 사실 RGB를 16진수로 표현한 것이다. 예를 들어 #3B82F6은 이렇게 분해된다.
- 3B → 십진수 59 (Red)
- 82 → 십진수 130 (Green)
- F6 → 십진수 246 (Blue)
결과적으로 #3B82F6 = rgb(59, 130, 246)이다. 원리를 알면 간단하지만, 매번 16진수를 십진수로 바꾸는 건 번거롭다.
보색과 유사색을 함께 찾으려면
단일 색상을 정했는데 어울리는 배색을 고르기 어렵다면 보색(complementary)과 유사색(analogous)을 참고하면 된다. 보색은 색상환에서 정반대에 위치한 색으로, 대비가 강렬해서 강조 요소에 쓰인다. 유사색은 색상환에서 인접한 색들로, 자연스럽고 안정감 있는 조합을 만든다.
색상 코드 변환기에 기준 색상을 넣으면 HEX, RGB, HSL, CMYK 변환은 물론이고 보색과 유사색, 10단계 명도 팔레트까지 한 화면에 나온다. 디자이너에게 받은 HEX 코드를 인쇄소용 CMYK로 바꾸거나, CSS에 쓸 RGB 값을 뽑을 때 따로 계산할 필요가 없다.
TIP 모니터에서 보이는 색과 실제 인쇄 결과는 항상 차이가 있다. CMYK로 변환해도 정확한 인쇄 색은 출력 환경에 따라 달라지므로, 중요한 인쇄물이라면 반드시 시안 출력(proof)을 확인해야 한다.
색상 코드를 다루는 일이 잦다면 변환기 하나 즐겨찾기에 넣어두는 게 편하다. 형식 간 변환은 물론이고 배색 아이디어까지 한 번에 해결된다.