웹사이트 배경색을 바꾸려는데 디자이너가 보내준 색상은 CMYK 값이고, CSS에는 HEX 코드를 넣어야 한다. 같은 빨간색이라도 #FF0000과 rgb(255, 0, 0)과 cmyk(0, 100, 100, 0)은 전부 표기법이 다르다. 인쇄와 웹에서 쓰는 색상 형식이 다르기 때문에, 변환이 필요한 순간이 자주 생긴다.
색상 형식 4가지, 뭐가 다른가
| 형식 | 표기 예시 | 주요 사용처 | 특징 |
|---|---|---|---|
| HEX | #3498DB | 웹(CSS, HTML) | 16진수 6자리, 가장 많이 쓰이는 웹 색상 표기 |
| RGB | rgb(52, 152, 219) | 웹, 앱 개발 | 빨강/초록/파랑 0~255 값으로 표현 |
| HSL | hsl(204, 70%, 53%) | CSS, 디자인 도구 | 색상(Hue)/채도(Saturation)/밝기(Lightness) 기반 |
| CMYK | cmyk(76, 31, 0, 14) | 인쇄물(명함, 포스터) | 잉크 혼합 비율, 인쇄 전용 |
웹에서는 HEX와 RGB가 사실상 표준이고, 인쇄소에 넘기는 파일에는 CMYK를 써야 색이 정확하게 나온다. HSL은 색상을 직관적으로 조절할 때 편하다. 밝기 값만 바꾸면 같은 계열의 밝은 색/어두운 색을 쉽게 만들 수 있다.
색상 코드 변환하는 법
디자이너에게 받은 CMYK 값을 CSS에 쓸 수 있는 HEX나 RGB로 바꿔야 할 때, 색상 변환기에 한쪽 값만 넣으면 나머지 세 형식이 자동으로 나온다. 컬러 피커로 화면에서 직접 색을 고를 수도 있고, 슬라이더로 R, G, B 값을 미세하게 조절하는 것도 가능하다.
TIP HEX 코드를 입력할 때 # 기호를 빼먹으면 인식이 안 되는 도구도 있다. 6자리 코드 앞에 #을 반드시 붙이자.
보색과 유사색, 디자인에서 왜 중요한가
배경색을 정했으면 거기에 어울리는 텍스트 색, 버튼 색을 골라야 한다. 이때 쓰는 기준이 색상 조화 이론이다.
보색
색상환에서 정반대(180도)에 위치한 색이다. 파란색의 보색은 주황색. 강한 대비가 필요할 때 쓴다. CTA 버튼이나 강조 배지에 보색을 적용하면 눈에 확 띈다.
유사색
색상환에서 30도 인접한 색이다. 파란색의 유사색은 청록과 남색. 자연스럽고 안정감 있는 배색에 적합하다. 블로그나 포트폴리오처럼 차분한 느낌을 주고 싶을 때 유사색 조합이 효과적이다.
색상 변환기에서 색을 하나 선택하면 보색, 유사색, 삼각형 조합까지 자동으로 생성해준다. 10단계 밝기 팔레트도 함께 나오니, 같은 색의 밝은 버전과 어두운 버전을 한 번에 확인할 수 있다.
CMYK와 RGB 변환 시 주의할 점
CMYK와 RGB는 색을 표현하는 방식 자체가 다르다. RGB는 빛을 섞는 방식(가산 혼합)이고, CMYK는 잉크를 섞는 방식(감산 혼합)이다. 이 때문에 모니터에서 보이는 색과 인쇄물의 색이 다를 수 있다.
- 모니터에서 보이는 형광빛 초록이나 네온 파랑은 CMYK로 정확히 재현하기 어렵다
- 인쇄물 최종 색상은 반드시 인쇄 교정본(프루프)으로 확인하는 게 안전하다
- 웹 전용이라면 CMYK 변환은 신경 쓸 필요 없이 HEX/RGB만 쓰면 된다
색상 코드 하나 바꾸는 건 간단한 작업이지만, 형식을 잘못 쓰면 화면과 인쇄물에서 전혀 다른 색이 나올 수 있다. 작업 환경에 맞는 형식으로 변환해서 쓰면 이런 실수를 방지할 수 있다.