디자이너가 보내준 색상 코드가 #FF6B35인데, CSS에서는 RGB 값이 필요하다. 인쇄물 작업에는 CMYK를 넣어야 한다. 같은 색인데 표현 방식이 달라서 매번 변환해야 하는 상황이 생긴다.
색상 코드 체계 4가지
- HEX (16진수)
- #FF6B35처럼 앞에 #이 붙는 6자리 코드. 웹 디자인과 CSS에서 가장 많이 쓴다. 각 두 자리가 빨강, 초록, 파랑 값을 나타낸다.
- RGB
- rgb(255, 107, 53)처럼 빨강/초록/파랑 각각의 밝기를 0~255로 표현한다. CSS와 프로그래밍에서 자주 사용한다.
- HSL
- 색상(Hue), 채도(Saturation), 명도(Lightness)로 나눈 방식. 색의 톤을 조절할 때 직관적이어서 디자이너에게 편하다.
- CMYK
- 시안, 마젠타, 옐로, 블랙의 잉크 비율. 인쇄물 전용이다. 모니터 색상(RGB)과 인쇄 결과(CMYK)는 차이가 날 수 있다.
어디에 어떤 코드를 쓸까
| 용도 | 추천 코드 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 표준 |
| 앱 개발 | RGB 또는 HEX | 개발 프레임워크 기본값 |
| 인쇄물 (명함, 전단) | CMYK | 인쇄 장비가 CMYK 기반 |
| 색상 톤 조절 | HSL | 밝기/채도 조절이 직관적 |
보색과 유사색 활용
기본 색상이 정해지면 보색(반대 색)이나 유사색(인접 색)을 함께 쓰면 디자인이 안정적으로 보인다. 보색은 강한 대비를 줄 때, 유사색은 부드러운 조화를 낼 때 쓴다. 예를 들어 #FF6B35(주황)의 보색은 파란 계열이고, 유사색은 빨강이나 노랑 쪽이다.
TIP 브랜드 컬러를 정했는데 서브 컬러가 안 떠오른다면, 보색이나 유사색을 자동으로 뽑아주는 도구를 활용하면 고민 시간이 줄어든다.
색상 코드 변환하기
포토샵에서 스포이드로 찍으면 HEX는 바로 나오지만, CMYK나 HSL까지 동시에 보기는 번거롭다. 온라인 색상 변환기에 코드 하나를 입력하면 HEX, RGB, HSL, CMYK 네 가지가 한 번에 나온다. 컬러 피커로 직접 색을 찍어서 코드를 추출하는 것도 가능하다.
색상 코드 변환은 단순 작업이지만 수동으로 하면 오차가 생기기 쉽다. 특히 CMYK 변환은 공식이 단순하지 않아서, 도구를 쓰는 편이 정확하다.