웹 디자인에서 색상 코드를 받았는데 HEX인지 RGB인지도 모르겠고, 포토샵에서는 되는데 CSS에서는 안 먹힐 때가 있다. 색상 코드 변환은 디자이너, 개발자, 블로거 모두에게 필수 스킬인데, 수동으로 하면 틀리기 쉽다.
색상 코드 형식 4가지
- HEX
#FF5733형태. 웹(CSS, HTML)에서 가장 많이 쓴다. 6자리 16진수.- RGB
rgb(255, 87, 51)형태. 빨강, 초록, 파랑의 밝기를 0~255로 표현. CSS와 화면 디자인에 쓴다.- HSL
hsl(11, 100%, 60%)형태. 색상(Hue), 채도(Saturation), 밝기(Lightness)로 구분. 색을 직관적으로 조절하기 편하다.- CMYK
- 인쇄용 형식. 청록, 자홍, 노랑, 검정 비율. 명함, 포스터 등 인쇄물에서 사용한다.
웹에서는 HEX와 RGB, 인쇄에서는 CMYK
모니터와 인쇄물은 색을 표현하는 방식이 다르다. 화면은 빛을 섞어서 색을 만들고(RGB), 인쇄는 잉크를 섞어서 만든다(CMYK). 포토샵에서 고른 색이 인쇄하면 다르게 나오는 이유가 바로 이것이다.
| 용도 | 추천 형식 | 이유 |
|---|---|---|
| 웹 CSS | HEX 또는 RGB | 브라우저 호환성 높음 |
| 디자인 작업 | HSL | 밝기/채도 조절이 직관적 |
| 인쇄물 | CMYK | 인쇄 결과물과 색상 일치 |
보색과 유사색 활용
메인 색상을 정했으면 거기에 어울리는 조합을 찾아야 한다. 보색은 색상환에서 정반대에 있는 색으로 강한 대비를 만들고, 유사색은 30도 범위 안의 인접한 색으로 부드러운 조합을 만든다.
- 보색 활용: CTA 버튼, 강조 요소 (눈에 확 띄어야 할 때)
- 유사색 활용: 배경, 카드 UI, 전체적인 분위기 통일
변환 직접 해보기
디자이너에게 받은 HEX 코드를 CSS RGB로 바꾸거나, 인쇄 업체에 CMYK 값을 넘겨야 할 때 색상 코드 변환기를 쓰면 한 번에 네 가지 형식으로 바꿀 수 있다. 컬러 피커로 색을 고르면 보색과 유사색까지 자동으로 나오니 배색 고민도 줄어든다.
코드 하나 잘못 넣으면 사이트 전체 색감이 틀어지니, 변환은 도구에 맡기고 결과만 복사하는 게 확실하다.