디자이너가 보내준 색상이 HEX 코드인데, CSS에는 RGB로 넣어야 하고, 인쇄 업체에는 CMYK로 전달해야 한다. 전부 같은 색인데 형식만 다를 뿐이다. 문제는 이 변환을 수작업으로 하기 어렵다는 것이다.
색상 코드 형식 4가지
- HEX (#FF5733)
- 16진수 6자리로 색상을 표현한다. 웹에서 가장 널리 쓰이는 형식이다. 앞 두 자리가 빨강, 가운데 두 자리가 초록, 뒤 두 자리가 파랑 값이다.
- RGB (255, 87, 51)
- 빨강(R), 초록(G), 파랑(B) 값을 0~255 사이 숫자로 표현한다. CSS에서
rgb(255, 87, 51)형태로 쓴다. 투명도가 필요하면 RGBA를 쓴다. - HSL (11°, 100%, 60%)
- 색조(Hue), 채도(Saturation), 명도(Lightness)로 표현한다. 색의 밝기나 선명도를 직관적으로 조절할 때 편하다.
- CMYK (0%, 66%, 80%, 0%)
- 시안(C), 마젠타(M), 옐로(Y), 블랙(K)의 잉크 비율이다. 인쇄물에서 쓰는 형식이다. 모니터 색상과 인쇄 결과가 다를 수 있으니 주의해야 한다.
어디에 어떤 형식을 쓰나
| 용도 | 권장 형식 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 호환성 최고 |
| 디자인 툴(피그마 등) | HEX | 디자이너 간 공유 표준 |
| 인쇄물(명함, 전단지) | CMYK | 인쇄기가 CMYK 기반 |
| CSS 밝기/채도 조절 | HSL | 명도만 바꾸기 직관적 |
한 색상의 HEX를 알면 나머지 형식은 자동으로 구할 수 있다. 색상 코드 변환기에 HEX 값을 넣으면 RGB, HSL, CMYK가 동시에 나오고, 반대로 RGB를 넣으면 HEX가 바로 생성된다.
보색과 유사색 활용법
색 하나를 정했는데 어울리는 조합을 모르겠을 때가 있다. 색상환 기반 규칙을 알면 배색이 편해진다.
- 보색: 색상환에서 정반대에 있는 색. 대비가 강해서 강조 요소에 적합하다 (예: 파랑 ↔ 주황)
- 유사색: 색상환에서 30도 인접한 색. 자연스럽고 안정적인 조합이다 (예: 파랑-남색-보라)
- 삼각 조합: 색상환에서 120도 간격의 세 색. 균형 잡힌 다채로움이 필요할 때 쓴다
TIP 메인 색상 하나를 정하고, 같은 색의 밝기 변형(10단계 팔레트)을 배경·텍스트·버튼에 나눠 쓰면 통일감 있는 디자인이 된다.
색상 변환 공식을 외울 필요는 없다. 코드 하나만 넣으면 나머지가 자동으로 나오니까, 디자인 작업과 개발 사이에서 색상 때문에 시간을 낭비할 일이 없어진다.