디자이너가 보내준 색상은 HEX 코드인데, CSS에는 RGB로 넣어야 하고, 인쇄소에서는 CMYK 값을 요구한다. 같은 색인데 표현 방식이 다를 뿐인데, 변환할 때마다 매번 검색하게 된다.
색상 코드 형식 4가지
- HEX
- #FF5733처럼 앞에 #을 붙이고 6자리 16진수로 표현한다. 앞 두 자리가 빨강, 가운데가 초록, 마지막이 파랑이다. 웹 디자인과 CSS에서 가장 흔하게 쓰인다.
- RGB
- 빨강(Red), 초록(Green), 파랑(Blue) 각각 0~255 사이 값으로 색을 표현한다. rgb(255, 87, 51)처럼 쓴다. 모니터, 스마트폰 등 화면 기반 색상 표현에 쓰인다.
- HSL
- 색조(Hue, 0~360도), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 구분한다. 사람이 색을 인지하는 방식과 비슷해서 색상 조정할 때 직관적이다.
- CMYK
- 청록(Cyan), 자홍(Magenta), 노랑(Yellow), 검정(Key) 4가지 잉크 비율로 표현한다. 인쇄물 제작에서 쓰인다. 화면 색상과 인쇄 결과가 다를 수 있어서 인쇄 전에 반드시 CMYK로 변환해야 한다.
어디에서 어떤 형식을 쓸까
| 작업 | 권장 형식 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 기본 지원 |
| 앱 UI 디자인 | HEX 또는 RGB | Figma, Sketch 기본값 |
| 명함, 포스터 인쇄 | CMYK | 인쇄기가 CMYK로 작동 |
| 색상 미세 조정 | HSL | 밝기, 채도 조절이 직관적 |
| 프레젠테이션 | RGB | 파워포인트, 구글 슬라이드 기본값 |
보색과 유사색 활용
색상 하나를 정했는데 어울리는 조합을 찾기 어려울 때가 있다. 이럴 때 보색과 유사색 개념이 유용하다.
- 보색: 색상환에서 정반대에 위치한 색. 강한 대비를 만들어서 버튼, CTA(행동유도) 영역에 쓰면 눈에 잘 띈다.
- 유사색: 색상환에서 인접한 색. 자연스럽게 어울리는 조합이라 배경, 카드, 그라데이션에 쓰기 좋다.
TIP 브랜드 메인 컬러를 정한 뒤 보색을 포인트 컬러로, 유사색을 보조 컬러로 쓰면 별도 컬러 가이드 없이도 통일감 있는 디자인이 나온다.
색상 코드 변환하기
작업 중에 색상 코드를 빠르게 바꿔야 할 때 색상 변환기를 열어두면 편하다. HEX 값을 입력하면 RGB, HSL, CMYK가 동시에 표시되고, 슬라이더로 색상을 미세하게 조정할 수도 있다. 보색과 유사색도 자동으로 생성해 주니 배색 고민을 덜 수 있다.
색상 코드 변환은 디자인과 개발 사이를 오가는 사람이라면 매일 하게 되는 작업이다. 형식별 차이만 알아두면 어떤 값을 넣어야 하는지 헤매는 시간이 줄어든다.